Quickly create rounded corners!

Hello all!

Fixed-width rounded-corner boxes are the easiest to create. They require only two images:
one for the top of the box and one for the bottom. For example, say you want to create a
box style like the one in the Figure.

The markup for the box looks something like this:

<div class="box">
<h2>Headline</h2>
<p>Content</p>
</div>




In your favorite graphics package you need to create two images like those in Figure below
one for the top of the box and one for the bottom.

You then apply the top image to the heading element and the bottom image to the bottom
of the box div. Because this box style just has a solid fill, you can create the body of
the box by adding a background color to the box div.

.box {
width: 418px;
background: #effce7 url(images/bottom.gif) no-repeat left bottom;
}
.box h2 {
background: url(images/top.gif) no-repeat left top;
}
You will not want your content to butt up against the sides of the box, so you also need to
add some padding to the elements inside the div:
.box h2 {
padding: 10px 20px 0 20px;
}
.box p {
padding: 0 20px 10px 20px;
}

This is great for a simple box with a solid color and no borders.

Thanks all. Please leave your comments.

Next I will publish more advanced round corner methods.