A Common Approach

As with the previous examples we've deconstructed thus far, we first take a traditional approach to building a rounded-cornered box and rebuild it using CSS. For this example, I've decided to use the box design found in the "My Account" section of the popular DVD subscription site Netflix (Figure 5.1).

Figure 5.1. The "My Account" page on Netflix.com (from April 2005).

The rounded box is a common component on the Netflix site (and on many others), and rounded-off corners give that extra level of detail that would otherwise be just, well, boxy (Figure 5.2).

Figure 5.2. The rounded boxes found on the Netflix site are common on many sites.

You can probably guess what I'm going to say next regarding how these boxes are actually constructed on the Netflix site. That's right: using nested tables with GIF images referenced in the markup.

This section focuses on rebuilding one of these boxes, so let's zoom in and inspect the design details, noting what we need in a "materials checklist" for later. I've stripped away the content in Figure 5.3, so that you can clearly see, graphically, how the box is put together.

Figure 5.3. With the box content removed, we can more easily inspect the design details.

If we focus on the top portion of the box, notice each end is rounded at the top, followed by a gradient fade down to a solid line as a background for the box's heading (Figure 5.4).

Figure 5.4. A close-up of the background that sits behind the box's heading reveals a gradient fade down to a solid border.

Similarly, the bottom of the box has rounded corners on both ends, but without a gradient fade (Figure 5.5).

Figure 5.5. The box's rounded bottom corner has no gradient fade.