Previously, rounded corners in HTML was a difficult job, since we were obliged to use images and complex html to build a small section with rounded corners.

After doing some research, I found a small method to design the div and give it a rounded corner shape:

Now, with CSS 3, this became a simple easy job and compatible with all kind of browsers, especially after I read an article talking about this kind of styling. With the help of the Curved-Corner CSS , we can add the rounded corner layout to any section in the HTML page, and also compatible with any browser:

.box1 {
background-color: #f0f0f0;
width: 533px;
height: 50px;
margin: 0 auto 15px auto;
padding: 30px;
border: 1px solid #d7d7d7;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
behavior: url(border-radius.htc);
}

The file “border-radius.htc”, that can be downloaded from the Curved-Corner CSS , will do this job and we will end up with:

So from now on, no more images and complex styling. Rounded Corners are piece of cake now 🙂