Using Rounded Corners with CSS3
A few years back, rounded corners became one of the signature design elements of the Web 2.0 trend. Even though they started as a fad, rounded corners are more than simple eye candy. They also have a role in separating or grouping the sections of a page.
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.
Browser Specific Options
Through the use of proprietary CSS properties, certain browsers can already display rounded corners. For example, Firefox uses the -moz-border-radius property to control the corner radius of a page’s border. Safari can accomplish the same result with the -webkit-border-radius or -khtml-border-radius properties.
To give a 5 pixel border radius, the proprietary CSS property would look like:
-moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px;
Since proprietary CSS properties do not affect every web engine, you’ll need to include one for each browser family supported.
Cross Browser Considerations
Until more browsers begin to support CSS3, these options are a good way to increasing backwards compatibility with pure CSS. If you’re wondering how specific browsers handle the specification, this table has the results organized nicely.
Border Radius in Action
Let’s go through a quick example in border-radius usage. Since CSS3 has not yet been finalized, we’ll be including the proprietary options mentioned above too.
To keep things simple, we’ll make the targets of our experiment basic div elements. You can see the results of both together on the demo page.
Four Corners
This style will results in a box with four equally rounded corners.
.content-box{border:1px solid #AFAFAF; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius:5px; -khtml-border-radius:5px;}Two Corners
This style will result in a box with only the top two corners rounded
.specific-box{border:1px solid #000; border-radius:5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; -khtml-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px;}Keep in mind that even though border-radius is not yet supported by all browsers, it doesn’t hurt to include it anyways. This will help ensure that you have forward compatibility. Browsers with CSS3 support will use the property, while the rest will just ignore it.
Discussion
October 26th, 2009 at 12:11 AM
KHTML has border-radius? Now I need to start testing my sites in Konqueror.
.-= Eric B.´s last blog ..Creating an Awesome Website Design With Gimp =-.
October 26th, 2009 at 12:22 AM
How if displayed on IE..? I make one like that and didn’t work on IE… Any thought..?
October 26th, 2009 at 12:26 AM
@dhenk
Internet Explorer has no native border radius support. Since having rounded corners is not essential most design, you’ll want to have it gracefully degrade instead.
For further reading, I recommend this article on the issue. It seems to give a few good links.
October 26th, 2009 at 12:29 AM
@Zach
I’ve already make a design for my blog using rounded corners, and maybe I’ll use the img just for solving this problem. Thank you for the link provided …
October 26th, 2009 at 2:56 AM
What is a “radois”?
-webkit-border-radois: 5px;
October 26th, 2009 at 5:01 AM
when will IE support it? i sometimes use it and it would be great if more people could see the rounded corners. i have seen that many people use 2 or 3px so that the difference is not too muxh, good idea.
October 26th, 2009 at 5:22 AM
Personally we normally use slightly rounded corners for Safari and Firefox. Internet Explorer people probably won’t mind anyways, since they apparently done give a flying f**k about eyecandy anyways (according to their choice of browser).
Hope to see Internet Explorer builds with CSS3 support in the future though – and maybe a standard name for it instead of 3 different ones.
October 26th, 2009 at 10:27 AM
Cool, CSS is becoming more powerful
Sad, that IE doesn’t want to support those corners, cause I’m the only web-designer in our company and my boss just doesn’t understand, that IE is a f**king browser and it’s is just impossible to do things look in it as good as they look like in Firefox or Safari. So, I won’t be able to use this CSS3 anyway, till it will be fully suported by IE
.-= rl_creative´s last blog ..20 Awesome websites with extraordinary and mind-blowing content =-.
October 26th, 2009 at 10:48 AM
Really nice article on rounded corners, great to see CSS3 adding such impressive techniques!
.-= Inside the Webb´s last blog ..Interview with ThisWebHost – An Impressive new Web Hosting Company =-.
October 26th, 2009 at 12:13 PM
Just noticed last week that Chrome doesn’t support the shorthand method of border-radius to specify values for each corner (ie. 5px 5px 0 0). You have to set the values for -webkit-border-top-left-radius and -webkit-border-top-right-radius.
October 26th, 2009 at 6:36 PM
Hmm… could it be the Opera v.10 browser also has no native border radius support?
Because I see this isn’t work on Opera.
.-= A u d e e´s last blog ..COLOURlovers: It’s Coffee Time! =-.
October 26th, 2009 at 8:10 PM
Will do some testing, still using images at prsent to be on the safe side
October 27th, 2009 at 2:03 AM
Thanks for the link! I got so many hits on that table last night that my Web Host shut me down for a while. I hope the table is useful to folks; it would justify all the hours I spent reading the spec and coding up svg images. If only Internet Explorer supported svg…
.-= Jerry Seeger´s last blog ..Why Mazda Should Pay Me To Go On Road Trips =-.
October 27th, 2009 at 3:26 AM
I think I have seen a quick tip on themeforest blog or nettuts on how to create cross-browser rounded corners using a jquery plugin. it would still require javascript to be enabled but would still be nice to implement it. especially if you only need a few lines of code to do the trick.
here’s a link to a jquery plugin http://www.malsup.com/jquery/corner/
hope it helps someone
October 27th, 2009 at 3:39 AM
@Zach you mentioned, that Safari can do same with webkit or khtml properties. Why did you use both of them in your examples? Couldn’t we just use one of these?
October 27th, 2009 at 6:40 AM
this script if check in the check web broken link’s…is broken. Thanks for share
.-= BEBEN´s last blog ..Semua tentang Google page rank =-.
October 27th, 2009 at 8:15 AM
I’m massively into CSS3 at the moment as well as HTML5.
The only sticking point is with the client. It’s important to educate them to the fact that web sites don’t have to look identical in every browser.
Some of them just don’t get that yet
October 27th, 2009 at 10:19 AM
I saw one trick to make this work in Internet explorer too. Just three line css and an htc file.
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
October 27th, 2009 at 11:52 AM
@Jerry
Sorry about your server. Your table was just too useful to not share.
@Landish
Even though I haven’t experienced a case where you need khtml over webkit, I demonstrated it as an option to be on the safe side.
October 27th, 2009 at 5:23 PM
Odd. Opera doesn’t seem to support it either.
October 28th, 2009 at 8:00 AM
@Jani
htc file “you may be refering to nifty-corners”. this works great but with errors in IE6 plus it also degrades the site performance.
I like the idea of graceful degradation.
October 28th, 2009 at 6:02 PM
In safari 4 your two corner example in the demo didn’t work.
.-= Montana Flynn´s last blog ..Automate 404 discovery, the easy PHP way. =-.
October 28th, 2009 at 6:08 PM
It is better to style 1-3 corners using the longhand for safari’s sake.
This is the syntax in safari:
-webkit-border-bottom-right-radius: 5px;
And in Firefox:
-moz-border-radius-bottomright : 5px;
Add them together to get decent coverage of the browsers that support border-radius:
.-= Montana Flynn´s last blog ..Automate 404 discovery, the easy PHP way. =-.
October 29th, 2009 at 8:05 AM
does “border-radius” support in IE8? Haven’t checked yet.
October 29th, 2009 at 11:35 AM
No, I tested in my IE8, it’s not there, in Safari 4.0, only the example of four corners is working.
October 30th, 2009 at 12:59 AM
@Jack
Thanks
November 1st, 2009 at 5:00 AM
luv it!
November 7th, 2009 at 8:03 PM
Problem is that CSS3:s border radius isn’t really useful and the IE-hacks to get rounded corners are so bloated its scary unfortunately. :/
You should instead write evertything about getting it cross browser…. (and good!) but that is a bit harder.
.-= Tommie´s last blog ..Signs: The Secret to Getting Results from Your Advertisement Sign =-.
November 11th, 2009 at 5:32 PM
Tommie, to get it cross browser you could add a small jquery plugin for IE only using conditional comments.
Really though, who cares about IE. IMO they can see square corners and everyone who uses a decent browser gets to see the nice rounded corners.
Also using rounded corners is very useful for low budget sites since you don’t need to open up photoshop for every rounded corner!
.-= Montana Flynn´s last blog ..Automate 404 discovery, the easy PHP way. =-.
November 21st, 2009 at 4:56 AM
Montana: Hm — ok? The jQ-plugin(s) in existence is bloated and who cares about IE? Well… all the 50%+ users using it maybe?
And since when did border radius have anything to do with budget? It’s more expensive if any.
November 27th, 2009 at 6:34 AM
You might also want to have a look at FlexiPanels CSS – a Dreamweaver extension that makes rounded corner CSS boxes from a picture.
December 5th, 2009 at 11:20 AM
I’ve been using border-radius on form buttons. If you set the border-radius high enough, the two rounded corners come together to from an ellipse.
December 8th, 2009 at 5:12 AM
perfect is rounded css
December 10th, 2009 at 1:41 AM
sometimes, appearance of a website is different between one browser and other..
any explanation?
is it refers to uses of css?
thanks for answering
December 16th, 2009 at 12:11 AM
nice .. worked on firefox very well .. but not with IE8.. thank you very much Zach.
February 6th, 2010 at 5:22 PM
Nice tut. Thanks
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.