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.
On August 11, 2009
10:20PM
Rob H said:
Thank you for the informative article! I think it was important for you to mention the fact that the current vendor specific implementations are NOT valid CSS3. Despite Mr. Anonymous’s apparent resentment for the “so called made up W3C”, I personally appreciate the validation service very much. I think some collaboration on the part of browser brands is going to make the Internet alot more exciting and without a “so called” third party around to “make up” standards…you’ll have a slim chance of that happening. I would much rather see an eventual adoption of the standard css3 “border-radius” property by all browsers than expect to continue to use several slightly different proprietary properties. After all, judging by all the comments that point out that IE doesn’t support the examples given, people still don’t seem to understand what “vendor specific” means.
As for praboth’s comment about it not working in IE6….does ANYTHING work right in IE6? You might as well point out that jumping in the ocean will make you wet. If anyone is still using IE6, they don’t deserve the Internet.
On October 01, 2009
12:15PM
robsku said:
I want to quote V1’s comment about w3c:
“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..”
I think this is one bizarre view. For one, there is no official rules of web design (V1 is right on this) and W3C has never claimed that there is (and here V1 was wrong). There is however standards for things like (X)HTML and CSS and W3C is an organization that defines these standards they call “W3C recommendations” (not “rules everyone must follow”). The main goal of W3C is web interoperability and what these standards guarantee is:
* Any browser that supports a standard will correctly show anything designed following that standard.
* Any page designed following standard at least enough to look good & work is guaranteed to work on any browser supporting the used standard.
How web-sites should be designed is a never ending debate, but it seems that almost all of the web today (unlike in late 90’s) is designed so that they work on any modern browsers and look great, most of those that look broken on some browsers are still good enough to read/use and only rarely a web-page, even if using some browser specific stuff fails so that it looks really horrible or has broken functioning on any browser (and when they do the browser where things fail is usually IE, most likely v. 6 or older). This is thanks to the fact that browser vendors eventually began to support standards and dropped almost all documented browser specific stuff, especially those that when used would cause major difference in look/functioning in other browsers and also to designers that chose standards to be good because “designed for browser X” was realized to be very bad for business and because too many browsers have large enough percentage of user base that making sure that pages do not fail on those browsers became an important issue.
Still there is nobody (that I know anyway) claiming that there are any official rules of web design (with exception that design-groups/companies usually have rules for how their pages are to be done) and nobody so deluded that he claims that everyone must follow such rules. There are however many kinds of opinions about good/bad ways of design.
** My opinions on (non-)standard(s) and good/bad design **
Whether the css-properties are standard or not (and browser specific ones never are) is not an issue unless you want your page to be 100% standard compliant.
What really matters is how you use non-standard browser specific properties. If you use them in away that the page looks broken – or even worse, does not work – in other browsers, then you are most definitely doing things wrong. If all that your non-standard properties cause is a little different look (ie. normal square corners instead of rounded ones) then everything is fine.
Personally IMHO it’s up to the designer to use whatever non-standard tricks just as well as javascript & AJAX (which are not supported by all browsers and may be impossible to fully implement in some text-based and mobile browsers) but the page should degrade gracefully on old browsers. IMHO a web-mail application (for example) can be 100% designed with dynamical HTML, javascript & AJAX calls, but a good designer would design the server side code so that if user enters with ie. Lynx the server will instead give the user a version that uses no scripts, looks at least readable on Lynx and good on Links and anything better and manages client/server interoperability with good old links that send GET request and forms that send POST requests and thus reload page recreating the page view according to users requests.
That is my opinion – unless you are designing for example a web app that you know to be always used in a defined environment – for example I’m doing a web application for my schools net administration boys and knowing it will never be ran in any other than IE, FF and maybe Chrome I’m using JavaScript+jQuery, CSS stylings, etc. extensively without caring about any other browsers as in this case it simply don’t matter even to 0.01% of users if it wont work on older or different browsers. All my public web projects are at least readable with Lynx and with Links they look as good as a page can in Links and while on modern browsers there is still quite a lot of CSS design, scripts, etc. I bet that my pages could be read even with old Mosaic browser – and that’s how it should be too :)
On January 11, 2010
4:04AM
anonymous said:
I can’t thank you enough for this. You’ve saved me a lot of time and frustration.
On January 15, 2010
4:04AM
jocuri said:
So is there necessary to modify the code for complaint with css vadidator and be reading good by browsers?
On January 16, 2010
9:24AM
Pumpkin said:
That is great…!!!
Thanks a lot