Rounded corners in CSS
Rounded corners using CSS and some (x)HTML
If you don't mind putting rounded corners in to the mark-up, but don't want the kerfuffle of using a table, then this should work for you. Create a small rounded corner:
- With a graphics programme, create a circle 32 pixels in diameter.
- Invert the colours so the background becomes transparent.
- Crop it to the top left corner, giving a 16x16 pixel graphic called "top-left.gif"
- Save it, and rotate through 90 degrees to save 3 more graphics for the other corners: "top-right.gif", "bottom-left.gif", "bottom-right.gif".
Or steal these ones: 
(right-click and Save Image)
Because we made the rounded corners transparent on a white background, we can use it to let any colour background show through.
If, as here, the background isn't white, you'll see the white in the graphic
Now, in your CSS, make a class for each corner:
.round-tl {
background: url(top-left.gif) top left no-repeat;
}
.round-br {
background: url(bottom-right.gif) bottom right no-repeat;
}and so on.
Finally, in your html, start a div for each class and close them all after the content - see the source of this page, or below:
<DIV class=box>
<DIV class=round-tl>
<DIV class=round-tr>
<DIV class=round-bl>
<DIV class=round-br>
<<P>Rounded corners using CSS and some (x)HTML, etc.</P>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
If you don't want all the corners rounded, just leave the corresponding div out.