IE does not support CSS3 rounded corners at this moment. However IE does have a method of extending their support for different styles which can be included in the style sheet. These IE style extensions are called behaviors.
On Google code site exists border-radius.htc when this file is uploaded to a site. It can be called using:
<style>
.rounded-corners {
behavior: url(border-radius.htc);
}
</style>
The complete solution would then become …
<style>
.rounded-corners {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
</style>
<!–[if IE]><link rel=”stylesheet” href=”ie.css” type=”text/css” /><![endif]–>
Note: if the behavior: url address is not absolute it is relative from the browser html page not the css page.
…dont work in ie7
fgfg use http://code.google.com/p/curved-corner/downloads/detail?name=border-radius.htc for IE7. border-radius.htc which works with IE 6, 7, and 8. HTCs are only read by IE – In the example I’ve separated the styles out of the habit.
ie.css would be for the htc behavior.
If you would like you can code it this way.