All Css Curved Corners Technique:

There are so many methods for curved corners out there, that I’m not sure if this one has already been invented by someone else. However, I’ve created a method that works fairly well with no extra javascript markup and is completely fluid.

This method uses three images floated into three corners of the element. The fourth image is set by adding a background property in the main element. Inside an element and before any other content you have the top right element class roundtopr (r is for right). It is floated right and contains a background image of the curve you want. Here is the markup.

<div id=”mainstuff”><div class=”roundtopr”></div>

blah blah blah

<div class=”roundbotl”></div><div class=”roundbotr”></div></div>

and the CSS.

#mainstuff{
text-align: left;
background: #333333 url(images/tl.png) no-repeat top left;
}

/********Rounded Corners**********/

.roundtopr {
float: left;
display: inline;
width: 99%;
height: 20px;
background: url(images/tr.png) no-repeat top right;
}

.roundbotl {
float: left;
display: inline;
width: 49%;
height: 20px;
background: url(images/bl.png) no-repeat top left;
}

.roundbotr {
float: right;
display: inline;
width: 49%;
height: 20px;
background: url(images/br.png) no-repeat top right;
}

This method has been tested in the newest versions of ie, firefox, and opera.