Cross-browser CSS3 rounded corners

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.

Step 1.  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 */ 
-o-border-radius: 10px; /* Opera */
border-radius: 10px; /* CSS3 */
}
 

Step 2. Border-radius for Internet Explorer

Download the Download 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]-->