Saturday, September 29, 2012

IE Round Corner Css

The easy part – Firefox, Safari & Chrome

.rounded-corners {
     -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}
 

Rounded Corners in IE


None of the IEs support border-radius, not even IE8. When Microsoft released IE8, it’s almost as if they tried to catch up with browsers that were out when they released IE7. Don’t get me wrong, they fixed a lot and I wouldn’t trade even something small like display: table-cell for border-radius.
Fortunately, IE9 will have some CSS3 support, but until then we’ll have to use a border-radius hack in all IEs.
Although this hack is pretty fussy, I’ve gathered a couple guidelines that should help you debug any problems you may have.
First download this .htc solution: Curved Corner and upload it to your site. Then wherever you need a border radius, apply this CSS:
.rounded-corners { 
    behavior: url(/css/border-radius.htc); 
    border-radius: 20px; 
}
 

 

No comments:

Post a Comment