When I started programming and had to begin designing my first user interface in HTML, I was always puzzled as to why are all visual elements in HTML rectangular. I soon learned that in those days if one would want a circle to be drawn on a page, then the only way possible was using an image, the same was true for drawing elements with rounded corners.

Thankfully HTML5/CSS3 guys were listening and the latest css3 standard supports defining the corner radius of a circle, this can be used to make an element look like a circle too if you want.

Here I present a cross browser css3 class which will introduce a curve on otherwise rectangular elements. #### **Border-radius for modern browsers including IE9 **

.curve{
 -webkit-border-radius: 10px; /* Safari, Chrome */

 -moz-border-radius: 10px; /* Firefox */

 border-radius: 10px; /* CSS3 */
}

Border-radius for IE (version < 9)

Download the border-radius.htc file,and put it on the website.

.curve{
 behavior: url(http://mywebsite.com/border-radius.htc);
}

If you would like to convert your rectangular element to circle the trick is to make your corner radius half the width/height of your shape and make sure that the shape is originally a square,i.e. height and width of the shape should be same.

#circular {
height: 100px;
width: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}

In above example, a div of id circular with height and width of 100px will look circular as the border radius is 100 / 2 = 50px . Hope this helps ;)