Rounded corners not working in Internet Explorer
Even after using htc properly, Internet Explore (IE) is not rendering rounded corners properly. Here is quick and easy solution which worked for me. You can give it a try if nothing seem to be working for you.
For example if we have to give rounded corners to the blue box, here goes the code:
.bluebox {
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
behavior: url(border-radius.htc);
border:2px solid #e7e7e7;
background: #e7e7e7;
padding:10px;
float:left;
}
But even after placing htc file and similar code, it doesn't seem to be working fine. The fix is to add the "behavior: url(border-radius.htc);" in all the containers CSS in which it falls.
Example: if the blue box is wrapped by 'maincontainer' and 'innercontainer' then in CSS for maincontainer and innercontainer, use "behavior: url(border-radius.htc);" and if you don't want rounded corners to that, add border:none to it.
The code will surely work.
Even after using htc properly, Internet Explore (IE) is not rendering rounded corners properly. Here is quick and easy solution which worked for me. You can give it a try if nothing seem to be working for you.
For example if we have to give rounded corners to the blue box, here goes the code:
.bluebox {
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
behavior: url(border-radius.htc);
border:2px solid #e7e7e7;
background: #e7e7e7;
padding:10px;
float:left;
}
But even after placing htc file and similar code, it doesn't seem to be working fine. The fix is to add the "behavior: url(border-radius.htc);" in all the containers CSS in which it falls.
Example: if the blue box is wrapped by 'maincontainer' and 'innercontainer' then in CSS for maincontainer and innercontainer, use "behavior: url(border-radius.htc);" and if you don't want rounded corners to that, add border:none to it.
The code will surely work.
No comments:
Post a Comment