Showing posts with label CSS 3 alternate rounded corner for IE. Show all posts
Showing posts with label CSS 3 alternate rounded corner for IE. Show all posts

Friday, January 27, 2012

Rounded corners not working in Internet Explorer (IE) using htc

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.