Bikas Nath

Hi to all… I know this has been posted lot many times on other blogs and forums too, still I think its very useful so posting once again

This will be useful in almost all the browsers, including IE 6, 7 & 8 (IE 9 supports CSS3 and eventually corner radius css).

Lets say, we need a div with a radius of 10px. We will write a class (lets give the name roundedcorner-box).

For Firefox, Safari,  Chrome and Opera 10.5 we will write the following css -

.roundedcorner-box {
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      -khtml-border-radius: 10px;
      border-radius: 10px;
 }

For IE 6, 7 and 8 just include the following javascript file in the header section in your site using the following code :

<script type="text/JavaScript" src="curvycorners.js"></script>

Download Curvy Corners js file

You can also download the js file from http://code.google.com/p/curvycorners/downloads/list

Will post some more refinements for corner radius in next post…

Enjoy…