Saturday, 25 February 2012

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(;
And replace on your absolute path, where you have placed the 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]-->





No comments:

Post a Comment