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.
.box {
background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
}
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.
.box {
background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
Lastly, we need to define the positioning of each corner image.
.box {
background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top left, top right, bottom left, bottom right;
}
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.
.box {
border-radius: 1.6em;
}
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.
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.
04/12/2006
“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.
Vote Helpful or Unhelpful
04/12/2006
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.
Vote Helpful or Unhelpful
04/12/2006
border-image could also be used to provide rounded corners.
Vote Helpful or Unhelpful
04/12/2006
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
Vote Helpful or Unhelpful
04/12/2006
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
Vote Helpful or Unhelpful
04/12/2006
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.
Vote Helpful or Unhelpful
04/12/2006
(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.
Vote Helpful or Unhelpful
08/12/2006
@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?
Vote Helpful or Unhelpful
11/12/2006
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.
Vote Helpful or Unhelpful
11/12/2006
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/
Vote Helpful or Unhelpful
04/01/2007
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.
Vote Helpful or Unhelpful
07/01/2007
I have seen a nice Example of Rounded Corners made with JavaScript at :
http://seky.nahory.net/2005/04/rounded-corners/
Vote Helpful or Unhelpful
05/03/2009
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
Vote Helpful or Unhelpful
09/03/2009
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
Vote Helpful or Unhelpful
03/04/2009
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;
Vote Helpful or Unhelpful
06/05/2009
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.
Vote Helpful or Unhelpful
10/07/2009
this exa. that’s not a browser support..different i6,mozilla,and opera
Vote Helpful or Unhelpful
06/08/2009
But Css3 is not working with ie6 ?
Vote Helpful or Unhelpful
23/01/2010
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?
Vote Helpful or Unhelpful
Impress us