For anyone using Firefox you can use the following for brilliant CSS rounded corners:

-moz-border-radius: 20px;

For anyone using Safari or Chrome you can use the slightly altered version below for just-as-brilliant CSS rounded corners:

-webkit-border-radius: 20px;

When IE9 is released in 2011 it will allow CSS rounded corners using the following:

border-radius: 20px 20px 20px 20px;

(No one seems to know why just yet, but you have to specify the border radius each time.)
However, none of these options work in Internet Explorer versions before IE9, so how can we solve that? Simple:

1. Download the border-radius.htc file from http://code.google.com/p/curved-corner/downloads/list and put it into your website

2. Add the following line to your other rounded corners code in your CSS file (replace “js” with whatever folder you put the .htc file into):

behavior: url(js/border-radius.htc);

That’s it, the border radius value is taken from your -moz-border-radius value.

Ofcourse, you could upload the .htc file to your web server and replace the relative url with a complete one, that will save you having to make sure you include the file in every site that uses rounded corners… atleast until IE9 comes out!

Happy coding