Skip to main content

CSS - rounded corners 1111 Responses

Last post: 1 year, 12 months ago | Thread started: Feb 8, 10, 6:25 p.m.

RespondNew TopicDisable Images

  • raf

    What is your approach to rounded corners, ie like those post count bubbles here on quick links list menu on the left hand side have?

    CSS offers elegant and simple rounded corners for webkit (safari, chrome) and gecko (firefox) browsers. IE needs more work though.

    QBN uses a variation of sliding doors technique with opening and closing images

    http://www.qbn.com/media/static/css/cssimg/left_col/no_left.gif

    http://www.qbn.com/media/static/css/cssimg/left_col/no_right.gif

    It's ok, but can get tricky.

    There are plenty of JavaScript-based techniques. What's your preferred and safe method?

    Feb 8, 10, 6:25 p.m. – Permalink
  • foobaz

    Go with CSS3 rounded corners.

    • and fuck IE?raf1/3
      right in the ass.fugged2/3
      be careful though. its FULL of shit.iCanHasQBN3/3
    next note >+ add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earFeb 8, 10, 6:40 p.m. – Permalink
  • univers

    DD_Roundies, and depending on your html structure they most likely are a great solution even in IE6

    http://www.dillerdesign.com/expe…

    • Thanks, demo doesn't work in IE8 though.raf1/4
      I have it work in IE8 and a ploy it on all of my teams sites.univers2/4
      doesn't work in IE8 for meBusterBoy3/4
      x-ua-compatible content="IE=7" ?amullins4/4
    next note >+ add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earFeb 8, 10, 6:45 p.m. – Permalink
  • scarabin

    http://dillerdesign.com/experiment/DD_belatedPNG/boxbg2.png

    + add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earFeb 8, 10, 6:56 p.m. – Permalink
  • amullins

    use css3 rounded corners + the browser specific rounded corners properties (ie. -moz-border-radius and -webkit-border-radius). ie will require a little vml work ( http://snook.ca/archives/html_an… ). jonathon snook's experiment as a jquery plugin http://plugins.jquery.com/projec… . dd_roundies will work if you use x-ua-compatible meta tag set to IE=7. Another jQuery plugin that makes use of vml http://www.parkerfox.co.uk/labs/… . Use of vml will require an xhtml doctype and new namespace for vml elements - as snook points out in his post.

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earFeb 8, 10, 7:47 p.m. – Permalink
  • falcadia

    http://woork.blogspot.com/2009/0…

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earFeb 8, 10, 7:47 p.m. – Permalink
  • fugged

    I've always used variations on the sliding doors technique and recently starting to use CSS3 more and more. If the rounded corners aren't critical to the design, then I say CSS and fuck IE.

    Personally not a big fan of JavaScript being used for rounding corners and the likes...

    • i use the sliding doors style thing also.airey
    + add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earFeb 8, 10, 8:22 p.m. – Permalink
  • Stugoo

    Nah javascript is not an option for rounded corners to be honest.

    I came across this a while ago.
    http://dimox.net/cross-browser-b…
    Been using it since.
    well that is to say I dont use it all the time, I wont use it on inputs, or key layout elements but will for tertiary items whilst I still get into my comfort zone with it.

    + add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earFeb 9, 10, 1:48 a.m. – Permalink
  • colourform

    CSS3 all the way for me. The hacks for IE only let it off the hook. By ignoring IE (square corners aint gonna kill usability) more and more people will realise the web looks better in modern browsers and make the switch.

    next note >+ add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earFeb 9, 10, 1:57 a.m. – Permalink
  • therapist

    easily done with CSS2 if your container has a fixed width or height. If it has a dynamic width in both dimensions then CSS3 and fall back to square. Agree with no JS for such things as rounded corners.

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earFeb 9, 10, 2:26 a.m. – Permalink
  • pillhead

    NiftyCube, I was playing around with it over the weekend, work great.

    Question: Does anyone know how to change the corner radius using NiftyCube to a set pixel radius?

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earFeb 9, 10, 2:46 a.m. – Permalink
  • lukus_W

    I think it's good to choose pointy corners sometimes.

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earFeb 9, 10, 2:49 a.m. – Permalink

Login or Register to respond to this

Skip to main content