CSS and Round Corners: Build Boxes with Curves

CSS and Round Corners: Build Boxes with Curves

One of the main reasons why designers use images on a Web page is to create curves and round corners. It's currently impossible to create any kind of curved shapes using pure HTML, so images need to be applied.

The problem? Putting these images into an HTML document with a table layout can create a large amount of superfluous code. In this tutorial, author Trenton Moss uses CSS to create this box with round corners, without an 'img' tag in sight!

The Code:
Our finished HTML now looks like this:

div class="bl"
div class="br"
div class="tl"
div class="tr"
Lorem ipsum dolor sit amet consectetur adipisicing elit
/div
/div
/div
/div

div class="clear"
 
/div

Here's the CSS that makes it all happen:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}