24 ways

to impress your friends

Rounded Corner Boxes the CSS3 Way by Andy Budd

If you’ve been doing CSS for a while you’ll know that there are approximately 3,762 ways to create a rounded corner box. The simplest techniques rely on the addition of extra mark-up directly to your page, while the more complicated ones add the mark-up though DOM manipulation. While these techniques are all very interesting, they do seem somewhat of a kludge. The goal of CSS is to separate structure from presentation, yet here we are adding superfluous mark-up to our code in order to create a visual effect. The reason we are doing this is simple. CSS2.1 only allows a single background image per element.

Thankfully this looks set to change with the addition of multiple background images into the CSS3 specification. With CSS3 you’ll be able to add not one, not four, but eight background images to a single element. This means you’ll be able to create all kinds of interesting effects without the need of those additional elements.

While the CSS working group still seem to be arguing over the exact syntax, Dave Hyatt went ahead and implemented the currently suggested mechanism into Safari. The technique is fiendishly simple, and I think we’ll all be a lot better off once the W3C stop arguing over the details and allow browser vendors to get on and provide the tools we need to build better websites.

To create a CSS3 rounded corner box, simply start with your box element and apply your 4 corner images, separated by commas.

  1. .box {
  2. background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
  3. }
  4. Source: /code/rounded-corners-the-css3-way/multiple-backgrounds.txt

We don’t want these background images to repeat, which is the normal behaviour, so lets set all their background-repeat properties to no-repeat.

  1. .box {
  2. background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
  3. background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  4. }
  5. Source: /code/rounded-corners-the-css3-way/no-repeat.txt

Lastly, we need to define the positioning of each corner image.

  1. .box {
  2. background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
  3. background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  4. background-position: top left, top right, bottom left, bottom right;
  5. }
  6. Source: /code/rounded-corners-the-css3-way/position.txt

And there we have it, a simple rounded corner box with no additional mark-up.

As well as using multiple background images, CSS3 also has the ability to create rounded corners without the need of any images at all. You can do this by setting the border-radius property to your desired value as seen in the next example.

  1. .box {
  2. border-radius: 1.6em;
  3. }
  4. Source: /code/rounded-corners-the-css3-way/radius.txt

This technique currently works in Firefox/Camino and creates a nice, if somewhat jagged rounded corner. If you want to create a box that works in both Mozilla and WebKit based browsers, why not combine both techniques and see what happens.

About the author

Andy Budd Andy Budd is an internationally renowned web designer, developer and weblog author based in Brighton, England. He specialises in building attractive, accessible, and standards complaint web solutions as a Director of Clearleft. Andy enjoys writing about web techniques for sites such as digital-web.com and his work has been featured in numerous magazines, books, and websites around the world. He is the author of CSS Mastery: Advanced Web Standards Solutions.

Your comments

  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. § Kanashii:

    border-image could also be used to provide rounded corners.

  4. § 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

  5. § 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

  6. § 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.

  7. § 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.

  8. § 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?

  9. § 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.

  10. § 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/

  11. § 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.

  12. § Kedar:

    I have seen a nice Example of Rounded Corners made with JavaScript at :
    http://seky.nahory.net/2005/04/rounded-corners/

Commenting is closed for this article.

24 ways: day 4