CSS rounded corners for all browsers

Every now and then something new comes along that makes you wonder how you ever survived without it.

The ability to create rounded corners using CSS is just such a thing. There are clever javascript tricks for repositioning a circle image in the background, or there's the old school method of creating an image for each corner, but, thank god, both methods can soon be relegated to the back of the css cupboard thanks to the introduction of the border-radius property.

The, still to be finalised, CSS3 method is as follows:
To round the lot: border-radius
To be specific:
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

As this method isn't finalised yet, Firefox, Safari and Chrome are making use of their own methods for the time being

Mozilla:
To round the lot: -moz-border-radius
To be specific:
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-moz-border-radius-topleft

Safari / Chrome:
To round the lot: -webkit-border-radius
To be specific:
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
-webkit-border-top-left-radius

So if you want to set a border-radius of 10 pixels to a div with the class 'rounded':

div.rounded {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

Nb: border-radius: won't have any effect for now, but we put it in there in anticipation of the glorious day when it will work across all browsers!

But what about the excellent Opera browser, and the many Internet Explorer browsers (complete with all their charming eccentricities that web developers love!) I hear you cry?

Well, nothing in CSS is THAT easy and so there is an inevitable hack.

First download this .htc solution: Curved Corner and add it to your site.

For example SITEURL/js/border-radius.htc

Then update the css as follows:

div.rounded {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
behavior: url(css/border-radius.htc);
border-radius: 10px;
}


For further tips take a look at Jon Raasch's excellent post on CSS rounded corners (particularly the note on the path to the htc file and the section entitled "Hoops you have to jump through for IE:").

Bear in mind that there are a lot of limitations with IE, so you may decide to ignore the hack and leave the site with square corners for browsers that don't support the property as well as putting the champagne on ice (for now).

Edit: 31 March 2010: Opera 10.5 has now been released, including full border-radius support!