Tag Archives: rounded corners

CSS rounded corners in all browsers


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.