Although a lot is made of the trickiness of doing things through tables, it is an involved thing to do curved boxes in CSS.

See the delicious bookmarks for more resources, such as this article on sitepoint.
There are at least two, sometimes three divs (or spans, or classes, or whatever — apparently this article discusses the differences.)

1. div #1 that often has the “background image” that is repeated in the “y” axis that contains the right and left edge of the ‘box’.
2. div #2 that has the “background image” that is that the top border of the box
3. div #3 that has the “background image” that is the bottom border of the box.

Pronet Advertising has a good example.

Some websites just use #2 and #3 to create solid tops and bottoms (but no fancy ‘left’ and ‘right’ borders through the same graphic) — see Movable Type

In movable type, they don’t even use separate ‘div’s … rather, they use CSS to change the h2 of the box, which has a “background image” which is the top border of the box; the container actually has the bottom border.

I have tried it as well … see in the files.