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( You can download below source.

Download for file :

More details are on

No comments: