Rounded corners are a great way to add character to a web site. Rounded corners are also modern and fancy. In this tutorial you will learn how to create rounded corners using simple CSS.

First of all, lets discuss the new CSS3 property which allows you to specify curved corners using CSS. This new CSS property has not yet been finalised, but you will be pleased to know that it works in 3 of the most modern browsers (Firefox, Safari and Chrome). As ever though, Internet Explorer has problems rendering the CSS property which makes curved corners, so an additional Javascript file to force render. Download the file from below.

This technique for rounding corners is about the most robust way I have found of doing it. It uses very little markup and no addition images. It also supports the use of background images on DIVs, even if they do not have rounded corners themselves.

Curvycorners Javascript File (some users may need to right click and ’save link as’)

From here it is very simple to implement:

1. Create your website as you normally would. In the head of each page enter this line of code <script type=”text/JavaScript” src=”curvycorners.js”></script> . This tells the browser to refer to the external Javascript file which you have downloaded from this tutorial. Place the JS file in the root folder for this to work.

2. Apply these CSS attributes to any element you want to apply rounded corners to
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
The code contains a pixel value which, if changed will change the curve on your element. The higher the pixel value the bigger the curve. In addition to this, you can specify diffferent values to each corner by applying the code like this
-moz-border-radius: 10px 20px 10px 20px;
-webkit-border-radius: 10px 20px 10px 20px;
Each figure applies to a different corner, starting with the top left and working around in a clockwise direction.

Example of how code should be applied
.midbox {
height: 280px;
width: 295px;
padding: 5px;
float: left;
margin-left: 5px;
border: 1px solid #CCC;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-image: url(images/midboxbg.png);
background-repeat: repeat-x;
text-align: justify;
}

You can apply curvycorners to both classes and IDs.

This technique will make curved corners render in any modern browser simply by using a 3kb javascript file and 2 lines of CSS3.