Cross-browser CSS3 border-radius (rounded corners)

Currently there are multiple variations for creating a HTML elements with rounded corners. The simplest of these is the method that uses CSS3.

Fortunately almost all modern browser (FireFox, Safari, Chrome and Opera since 10.50 pre-alpha) supports CSS3 border-radius, but unfortunately none of a versions of Internet Explorer (even IE8) does not support this property.

I very long time was waiting for a moment, when I can safely use the border-radius property on my sites. And this moment has finally has come – now we can make rounded corners in Internet Explorer with his means. This method uses VML and behaviour.

border-radius for modern browsers

This is the way that works in all modern browsers (except IE8) like FireFox, Safari, Chrome and Opera since 10.50 pre-alpha:

.rounded-corners {
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  border-radius: 10px; /* CSS3 */
}

border-radius for Internet Explorer

Download the border-radius.htc file, put it somewhere on your site, and then use this CSS code:

.rounded-corners {
  behavior: url(http://yoursite.com/border-radius.htc);
}

And replace http://yoursite.com/ on your absolute path, where you have placed the border-radius.htc file.

I think it’s better to put this CSS in a separate file and connect it using conditional comments:

<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection" /><![endif]-->

Demo

Download crossb-rowser border-radius demo.