The realm of CSS is a realm of boxes. Everything on the page is a box, within a box, within a box. No wonder it’s so common for beginning CSS developers (or, in my case, poor graphic designers with too much CSS experience) to create boxy layouts!
However, the forthcoming CSS3 specification offers us a glimmer of hope in the form of rounded corners. That’s right — once CSS3 is commonly supported, we’ll be able to childproof all those pointy edges and beautify the web in the process.
And better yet, a few browsers already support rounded corners! As I’m writing this, you’re pretty much limited to Mozilla/Firefox and Safari 3. However, this list is bound to grow as time goes on, so it couldn’t hurt to start playing around with this feature. Especially considering that, in the browsers that don’t support rounded corners, nothing bad happens — the user just sees regular, square corners.
For now, to get the code to work, you’re stuck using proprietary CSS tags: they won’t validate, but they’ll just be ignored by browsers that don’t support them. The code itself is pretty simple; for example, to create a div with nice rounded corners with a radius of 5 pixels, you’d just write something like this:
div.rounded {
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; }
And this rule will create a div that looks like this:
The two properties of note here are “-moz-border-radius” and “-webkit-border-radius.” The former is how to specify the radius — number of pixels from a hypothetical center point to the edge of the circle created by the rounded corner (see the image below) — in Mozilla-based browsers. The latter is doing the same thing, but for Safari.
The rule isn’t just limited to curving background colors, either. If you were to add a border to the element, the border would become rounded, as well. For example, a block quote could be styled like so:
blockquote {
margin: 1em 20px;
padding: 10px;
border: 2px solid #555;
background-color: #f2f2f2;
color: #555;
font-size: 140%;
text-align: justify;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; }
Resulting in a block quote that has a lot of style, without relying on images to accomplish the task:
And finally, you’re also not limited to either all rounded corners or none. Using this property, you can specify which corners you want rounded in your CSS. However, it’s important to note that the Firefox-based version of this rule has deviated a bit from the W3C standard, meaning it’s written slightly differently than the Safari-based rule. For example, consider these two rules used to round out the top-left corner of a box:
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
It’s a minor difference, in the grand scheme of things, but pretty critical if you want your rounded corners to show up where and how they should! Using the ability to round individual corners, you could generate fancy alert messages:
.alert {
border: 2px solid #fc0;
padding: 8px 10px;
font-size: 120%;
color: #c90;
font-weight: bold;
background-color: #ff9;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px; }
Or, you could apply rounded corners to three of the four edges of a user’s comment, resulting in a pseudo-voice bubble, all without a single image in sight:
.comment {
border: 1px solid #999;
background-color: #d8d8f4;
margin: 1em 40px;
padding: 15px;
-moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px; }
You can see all of my examples in action here. And these are just a few ways of the hundreds of ways you can harness the power of rounded corners with just a few lines of code. With techniques like this at our disposal, it’s easy to see why we’re all so eagerly awaiting CSS3!
On August 07, 2008
2:18AM
xxx said:
Of course it *will* validate — this (”-vendor-something”) is standard mechanism for vendor-specific extensions.
This blog is getting less informative every day :(
On August 07, 2008
8:46AM
Rob Glazebrook said:
While it’s true, vaguely anonymous, that this is the “standard mechanism” for vendor-specific properties, I would encourage you to run the CSS property through the W3C’s CSS Validation Service: http://jigsaw.w3.org/css-validator/
You’ll see an error along the lines of “Property -moz-border-radius doesn’t exist.” Meaning that whether the border-radius property is “standard” or not, it doesn’t validate with the most commonly-used validation tool on the web. And that’s worth letting my readers know in advance!
On August 08, 2008
6:05AM
V1 said:
Stop hugging the w3 validations, its only a guideline that tells u if certain attributes are correctly implemented in to your web page, having a invalid style sheet and / or html does NOT mean your website sucks in all browsers.. It might be invalid to the so called made up w3c standards, but that doesn’t mean the attribute or element is invalid or wrong.. It would not even hurt your page..
The validation really needs a upgrade to support this type of attributes..
These are not OFFICIAL rules of web design.. its some weird unofficial rule people think they should follow else they have failed everything in live.. ITS NOT THE END OF THE WORLD..
Anyways nice article, just felt like posting that to make a little point… :)
On August 11, 2008
1:30PM
Amber Wallace said:
This is great. Now how do we get the browsers to catch up, esp. IE? Maybe a bit of dreaming on my part.
I really enjoy this blog. I need to redo my old-school (bad slices - ah!) site, but I use CSS for all new client sites and I really appreciate your articles! Wanted to let you know. :-)
On August 25, 2008
3:39AM
Stefson said:
Nice article.
Don’t know why others are making such a big fuzz about it. Guess it’s easier to hate :)
Good work.
On September 19, 2008
6:21PM
Bill Lipa said:
I wrote an article about using border-radius together with a corner image fallback for IE. That way the modern browsers get pure, fast CSS, and IE still works.
http://www.bestinclass.com/blog/2008/simple-rounded-corners-with-css3-box-radius-and-fallback-for-ie/
On December 06, 2008
7:47PM
zach said:
such a waste. this doesn’t even work in ie.
On December 28, 2008
1:47AM
Kepri said:
Awesome, great tutorial. thanks for share.
On December 31, 2008
7:16AM
praboth said:
Doesn’t work in IE6
On January 17, 2009
5:39PM
Zenon said:
Yeah really handy that 80% of internet users will still see a square!!!!!!!!!!!
Or I could just do the same with a photoshop macro I created years ago, do the job in less than a second, and it works even if you use shitty mobile phone browsers without any script support.
On January 17, 2009
5:55PM
Rob Glazebrook said:
It boggles the mind, Zenon. It really does.
And the accuracy of your random “80%” statistic would vary wildly from website to website. For example, according to my logs on CSS Newbie, 79.13% of my users over the last month would have seen rounded corners if I had chosen to use this effect. Which is pretty close to the opposite of the number made up for your baseless statistics.
Regardless, this effect should still only be used on present-day websites if the success of your design and your user’s experience does not hinge on the curvature of any particular corner.
Then again, a similar argument could probably be made against JavaScript and Flash, really. But that’d just be crazy, right?
On January 20, 2009
3:16PM
Beroken said:
This also works quite well with Google Chrome :)
On January 21, 2009
10:28PM
sidhu said:
IT is great. But it is not working in IE
On January 23, 2009
7:03AM
Albert said:
Who gives a f..k about IE. Even IE7 sucks big time
On January 27, 2009
6:16AM
Dorela said:
Nice article, thanks for share.
On February 03, 2009
4:30PM
VA_WebWmn said:
Thanks Rob for sharing your code. Does it really matter if it doesn’t work in IE…just use it if you want and bad ass bloggers keep nasty comments to yourselves.
On February 10, 2009
1:10AM
Jamey Bridges said:
Rob,
Sure are some interesting comments :). I think your resource on this subject is excellent. The examples are easy to follow, so easy you can copy and paste into one’s own website. Thanks for the good work on this one and your other posts.
On March 10, 2009
4:21AM
doez said:
ok thx BOSSSS
On March 19, 2009
5:56AM
Thiyagarajan Veluchamy said:
hi
border-radius property not working inIE7
On March 25, 2009
7:00PM
Jeff said:
Wow, I can’t believe the amount of people saying “doesn’t work in IE”. Can’t you read?
You could be more accurate though; border-radius is supported in Gecko and Webkit browsers, of which there are many more than just Firefox and Safari.
I use this all the time to be frank and have done for quite some time—many companies are standardising on Fx as the in-house browser so we can use this for lightweight admin back ends, intranets and so on.