Rounded Corner Boxes the CSS3 Way

19 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. ZenBug

    “The goal of CSS is to separate structure from presentation [...]”

    I believe that should be “...content from presentation”. I would say ‘structure’ and ‘presentation’ refer to the same thing in Web-land.

  2. Drew McLellan

    ZenBug – not so. Structure and presentation are quite different. CSS enables you to take a well structured document (structured appropriately to reflect the content) and present it visually (or aurally) in any way you wish.

  3. Ben Ward

    Worth noting that border-radius is also functioning (with lovely anti-aliasing) in the more recent WebKit nightlies; the next version of Safari.

    CSS3 also offers one other way to provide rounded (or any other shape) corners which is also implemented in Safari (since August 2005, apparently): border-image. Rather than position background images, each corner (and edge) has a unique property, which get tiled together around the element.

    So:

    #box { border-top-left-image: url(topleft.png); border-top-right-image: url(toplright.png); border-bottom-left-image: url(bottomleft.png); border-bottom-right-image: url(bottomright.png); }

    3,763

  4. Jens Nedal

    This is indeed a very nice example and reminds of the way that we implement round borders at work at the moment, which works across Firefox, Internet Explorer 5/5.5/6.0/7. Opera, Safari…

    .....
    .box-topleft { background: url(top-left.gif) no-repeat top left;
    }
    .box-topright { background: url(top-right.gif) no-repeat top right;
    }
    .box-bottomleft { background: url(bottom-left.gif) no-repeat bottom left;
    }
    .box-bottomright { background: url(bottom-right.gif) no-repeat bottom right;
    }

    Then you just wrap all 4 layers within each other from .box-topleft to box-bottomright and place the content in the innermost div and add some padding and you are done. Alot of other nice stuff can be done this way, like applying shadow borders and stuff like that, though some more css needs to be added then, like can be seen here http://www.webtoolkit.info/css-drop-shadow.html .

    About structure/presentation: Yup, structure and presentation are to totally different things. The structure can and should mostly remain the same and the presentation changes through the stylesheet.

    Regards from a happy 24 ways advent calendar reader.
    Jens

  5. Si

    While this approach will save designers, developers and browser rendering a lot of time, when will we actually see CSS3 implemented across the board? It doesn’t even work in Firefox 2 (although I’m sure Mozilla won’t be far behind Safari for implementing it). How long can we realistically expect to wait for CSS3 to become Standard and implemented into popular browsers?

    Until then, we’re just going to have to resort to one of those 3,762 methods you mentioned earlier.

  6. Malarkey

    (From your last example) “Now if only the CSS working group could pull their fingers out and come to some kind of consensus as I really don’t want to have to wait another 5 years before we can start doing this on our sites.”

    One of the fascinating things about seeing the CSS WG in action is the huge amount of ground they need to cover to include (for example) internationalisation concerns. Their work is about far more than giving us designers and developers what we need. And therein lies the problem.

    The WG has published its timetable/priority list, but their idea of the top priorities probably don’t agree with ours. How are they to know what we feel are priorities? Sure there are the various mailing lists, but reading those for even the shortest time is better than an evening with John Major at sending you straight to sleep. What the process needs from designers is not an extended discussion about the finest details of the proposed specifications, but a clear message of what we want to work and how; with clear visual examples that everybody can understand.

    So the problem lies not only with the WG and the browser makers, but with us too. If we don’t tell them how and why we need these tools to work (and quickly) then we may well be sitting here in five years lashing together solutions in JavaScript.

  7. John Faulds

    @Malarkey – if official mailing lists put people to sleep, what is the best way to let the CSS WG know what we as designers want? Maybe we need some sort of referendum?

  8. Joel

    Hey this is exciting: the nightly build of Camino anti-aliases the corners created with border-radius! As does the nightly build of Safari, according to Ben Ward (above). Camino seems to get the newer Gecko stuff sooner than Firefox for Mac, so hopefully we will get these achingly beautiful corners in Firefox 3.

  9. Peter Gasston

    I recently came up with a solution which uses border-radius for Gecko & Webkit browsers, and image substitutes for Internet Explorer. Haven’t got it working in Opera yet, though.

    http://www.css3.info/blog/a-border-radius-solution/

  10. Bon

    “With CSS3 you’ll be able to add not one, not four, but eight background images to a single element.”

    Why not nine? Surely a background image for all four corners, all four edges, and the center?

    @Jens: Your solution is simple but it is a markup nightmare. Four nested divs? Yuk.

    P.S. The ‘Textile Help’ link at the bottom of the commenting box on 24ways.org is useless and needs fixing. The formatting legend is being parsed and turned into its appropriate HTML tag.

  11. Json

    Doesn’t work for me. This does.

    Tested in Opera 9.63 / FireFox 2.0.0.20 / IE 7.0.5730.13

    — Style start —

    #box {
    background: #89AC10;
    height: auto;
    width: auto;
    float: left;
    padding: 0px;
    margin: 0px;
    }

    #box .topleft {
    background: url(top-left.gif) no-repeat top left;
    float: left;
    height: 20px;
    width: 18px;
    }

    #box .topright {
    background: url(top-right.gif) no-repeat right top;
    float: right;
    height: 20px;
    width: 18px;
    }

    #box .bottomleft {
    background: url(bottom-left.gif) no-repeat left bottom;
    float: left;
    height: 20px;
    width: 18px;
    }

    #box .bottomright {
    background: url(bottom-right.gif) no-repeat right bottom;
    float: right;
    height: 20px;
    width: 18px;
    }

    #box h1{
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3em;
    margin: 5px 2px;
    padding: 5px 2px;
    }

    #box p{
    margin: 0px 5px;
    padding: 0px 5px;
    line-height: 1.3em;
    }

    — Style end —

    Cheers

  12. simy

    I like the code very much , But i found that Ur code doesn’t work in IE Browsers, Is there any fix for that.???

    Pls do reply

    Simy

  13. Perdele

    the simple way: background: url(cornettopleft.gif) top left no-repeat, url(cornettopright.jpg) top right no-repeat, url(cornetbottomleft.gif) bottom left no-repeat, url(cornetbottomright.gif) bottom right no-repeat;

  14. dzigner

    Sorry, but I didnt get a rounded box in FF, only left top corner was rounded, the other 3 square! I got it nicely on Chrome though, and ofcourse IE had no rounded corners at all.
    Will try whenever I chance to redesign(long sigh) my website.

  15. jeffz

    Why people go to such lengths to get round corners using some overcomplicated methods just to stay “100% div/css”?

    Have they all forgot KISS rule?

    Why not using css driven table nested inside of whole div layout for these layout elements which need round corners?

    In this respect table has everything divs lack.

    It helps with:

    - dynamically spanned connector images (small image connecting corners)

    - no problem with added content to one cell versus neighbour(s) – table always keeps expanded cell aligned to its neighbours

    - very spatially clean layout – no need for dozens of overlapping divs driven by complex css, giving most of us a good head spin to visualise it

    - no problem with 100% widths

    - no problem with 100% heights

    - no problem with keeping bottom cells on the bottom – same goes in general order of other table elements

    - taking advantage of css properties – yes! you can use classes and ids (etc) here as you would with divs

    … and above just for starters …

    So … until css3 techs are used by browsers wide and far … wouldn’t you say that turning into “div/css zealots” does not help anyone here?

Impress us

Be friendly / use Textile