New browsers now support rounded corners by tapping into their layout engines – such as webkit.
Older browsers like IE 8 and below do not support rounded corners, though there are ways to achieve it, I will not be discussing them here (die ie8 die!)

Continue reading to learn how to create sexy rounded corners on your website without using image work-arounds

To round the corners of an DOM object, give it the following css values.
As you can see, different lines target different layout engines. Hopefully when standards are aligned better this will be reduced to a single line!

until then…


.rounded-corners {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

You are also able to target a specific corner exclusively
note a ‘-‘ is not used to seperate the words ‘bottomright’ (which completely goes against css syntax flow). 

-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
-webkit-border-radius-bottomright: 50px;
-khtml-border-radius-bottomright: 50px;

New Firefox browsers are now supported without requiring the -moz- prefix, however its best to keep it yo give support for fireFox 3.x users