How to make IE support border-radius
by pixeldublu on Sep.24, 2010, under Resources, Tutorials
For those who do not know the border-radius option helps us make rounded corners in html. Most browsers have already implemented CSS 3 or have alternatives such as Mozilla, WebKit (opera) or KHTML (linux) but our beloved Internet Explorer as usual it lacks.
But we can solve this problem by adding a nice .htc component to the CSS and add some CSS3 support to old IE browsers.
PIE.htc ( Download )
Thus we can add rounded borders in IE using the code:
border-radius: 5px;
behavior: url(PIE.htc);
In some cases the item might disappear. If you have problems try adding:
position: relative;
For other browsers add this:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
And if you want just some corners to be rounded you can do it like this:
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-topleft: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-radius-topright: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-khtml-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;




