Wednesday, June 2, 2010

Curved corner (border-radius) cross browser

This is a behavior htc file for Internet explorer to make CSS property " border-radius " work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of csshe HTML:


.curved {
-moz-border-radius:10px; /*Firefox*/
-webkit-border-radius:10px; /*Safari and chrome*/
-khtml-border-radius:10px; /*Linux browsers*/
border-radius:10px; /*CSS3*/ }

<div class="curved">Curvd div</div>

For firefox, you can set border-radius by prefixing “-moz” to the css property. And ofcource for webkit use “-webkit” . Now IE ?? .. As IE is not a good browser to work with css, we need to make it so.

Here, you need to use a nice css hack. Some how I managed to have an htc file to make border-radius work in IE . Now adding the htc with one more line of css will make the curve work in IE browsers also behavior:url(border-radius.htc). You can download below source.

Download for radius.htc file : http://curved-corner.googlecode.com/files/border-radius.htc

More details are on http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
http://code.google.com/p/curved-corner/

No comments: