Coding a rectangular box with rounded corners (with CSS)

How do I code this in CSS:



--------

I usually tackle this by slicing it into three parts: the top (1), the liquid middle (2), and the bottom (3), as shown on the image below:



--------

However, I found that the rectangular boxes (with rounded corners) on this website load such a way that each rounded corner loads at different times. This should mean that a different image is used for each rounded corner, and is a totally different method of slicing and coding.

My questions are:
1. How do you code using the second method described above?
2. Which method is better?

Thanks!

The method you described above is using tables, so it's not any better at all that the first method you described. However, if you are looking for a pure CSS method then this method is one of the best to use.

I would still use the method you described yourself though, unless you wanted the box to expand horizontally.

Just wanted to sugest that :P

You could just use border-radius instead.

You will just have to wait a few years for it to be supported properly in browsers. (plus 10-15 for it to get supported in IE of course )

Ahh it's such a tedious process looking through the source codes to understand something. Thanks though, Joe. Great source.

An easy way is to use SpiffyCorners. It auto-generates the CSS code for rounded corners with whatever colors you want. Check it out at www.spiffycorners.com

SpiffyCorners generates way to much code for such a simple thing IMO.

I used a variation on the sliding doors technique for this work-in-progress.

Feel free to take a look at the html/css - but also be sure to make your own versions of the images :P

Originally Posted by seen.to SpiffyCorners generates way to much code for such a simple thing IMO.

Exactly what I was about to say. Both the Spiffy and Snazzy corners methods generate hugely bloated code meaning you end up with Divs there that are purely presentational which, in a way, goes against the whole idea of XHTML/CSS.