But the problem is, IE8 or the earlier versions of IE does not support the border-radius attribute, which is one of the coolest feature in CSS3 (!!). So this post is for them who are facing trouble to apply "border-radius" on crap-based browsers such as IE.
We just need to download an .htc file. Then put it in the root of your site and link it like bellow:
.rounded-corners{
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
behavior: url(link/border-radius.htc);
}
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
behavior: url(link/border-radius.htc);
}
Replace "link" with 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 like:
I think it’s better to put this CSS in a separate file and connect it using conditional comments like:
.rounded-corners{
behavior: url(link/border-radius.htc);
}
behavior: url(link/border-radius.htc);
}
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection" />
<![endif]-->
<link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection" />
<![endif]-->
Then the CSS syntax is similar to the non-ie-compliant one. For any kind of problem please inform us through comment.
Download Links:
Download border-radius Demo.zip
