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.

Advertisements

2 responses

  1. …dont work in ie7

    1. 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.

      .rounded-corners {
      behavior: url(border-radius.htc); /*IE6, 7 and 8 */
      -moz-border-radius: 10px; /* Firefox */
      -webkit-border-radius: 10px; /* Safari, Chrome */
      border-radius: 10px; /* CSS3 */
      }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: