One of the first criticisms leveled against CSS-based designs was that they were very
square and boxy. To get around this, people started creating designs that incorporated
more organic curved shapes. Rounded-corner boxes very quickly became one of the most
sought-after CSS techniques around. There are various ways of creating rounded-corner
boxes. Each approach has its strengths and weaknesses, and the one you choose depends
largely on your circumstances.
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.
<div class="box">
<h2>Headline</h2>
<p>Content</p>
</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.
.box {
width: 424px;
background: url(images/bg-tile.gif) repeat-y;
}
.box h2 {
background: url(images/bg-top.gif) no-repeat left top;
padding-top: 20px;
}
.box .last {
background: url(images/bg-bottom.gif) no-repeat left bottom;
padding-bottom: 20px;
}
.box h2, .box p {
padding-left: 20px;
padding-right: 20px;
}
