Section 24.4. Boxes with Rounded Corners

24.4. Boxes with Rounded Corners

Rounded corners are de rigeur in contemporary graphic design. Due to the rectangular nature of web design, there's no getting around using graphics for the rounded corners. But prior to CSS, the only option for creating an expanding box with rounded corners was to set up a nine-celled table. The same effect can be achieved using CSS styles and logical markup (and no tables, of course). As for most web design problems, there are many related solutions, the most simple of which are presented here. Other resources are listed at the end of this section.

24.4.1. Simple Rounded Box

The box in the first example creates a simple expandable rounded box filled with a solid color, as shown in Figure 24-8.

Figure 24-8. Simple box with rounded corners

These separate images could be combined into a single image file and applied in varying positions to each corner of the box. The advantage is the need to load or preload only one image, as opposed to four. This technique is discussed in more detail in the upcoming "CSS Rollovers" section.

This technique takes four image files (one for each corner) and applies them as background images to four elements in the markup. Figure 24-9 shows each image file used in the example.

Figure 24-9. The corner graphics for the simple box

The trick is making sure that the markup has four available elements for background image placement. This is what CSS designers commonly refer to as finding hooks in the markup to which styles can be applied. If your document structure has fewer than four elements, it may be necessary to add a div or two to get the necessary number of hooks (see note below). This generic, all-purpose example is created entirely out of divs, but it is preferable to use actual elements that have been marked up semantically.

     <div >         <div >             <div></div>         </div>               <div >                <h1>Header</h1>                <p>The content goes here</p>         </div>               <div >             <div></div>         </div>     </div> 

Adding meaningless empty elements damages the semantic integrity of the source document and is generally frowned upon. Still, it may be necessary to achieve certain visual effects. As a designer and developer, you need to consider the trade-offs and implement a solution based on your own priorities or the priorities of your project.

The style sheet shown here applies background images to each of the top and bottom divs and the divs they contain. The background of the whole box is set to a matching RGB value in this example, but it could also be a small tiling image to ensure the color matches exactly.

     /* set background images for corners */     .box { background: #CCC; }  /* could also use a repeating image */     .top div { background: url(top_left.gif) no-repeat top left; }     .top     { background: url(top_right.gif) no-repeat top right; }     .bottom div  { background: url(bottom_left.gif) no-repeat bottom left; }     .bottom      { background: url(bottom_right.gif) no-repeat bottom right; }            /* height and width details */      /* each image-holding div is set to the full width of the container */     .top div, .top, .bottom div, .bottom {         width: 100%;         height: 14px; /* match the width of your corner graphic */         font-size: 1px;     }     .content  { margin: 0 14px; } /* match the width of your corner graphic */     .box { width: 20em; }        /* the box can be any width */ 

This markup and style sheet was adapted with permission from an article by Douglas Livingstone. See the original tutorial and additional CSS tests at www.redmelon.net.

The Future of Background Images

The CSS Level 3 specification allows multiple background images to be applied to different locations within a single element. This would greatly simplify the markup required to create the expanding box in the previous example, because the images could be applied to a single containing element. As of this writing, multiple background images are supported only in the Macintosh Safari browser, but one day, it will be a useful tool that offers to greatly reduce the amount of non-semantic markup required for visual effects.

24.4.2. Fancier Boxes

If your design calls for more graphical embellishments on the edges of the box, yet you still need the box to be expandable, then a slightly different approach is in order. This example produces the expanding box style shown in Figure 24-10.

Figure 24-10. Fancier box edges

To achieve graphic effects on all four sides of the box, we start with the set of images shown in Figure 24-11.

Figure 24-11. Image elements for the fancier box

In this example, the markup must provide five hooks for background image styles. Instead of all divs, this time, we'll take advantage of the existing H2 and p elements in the markup and add divs only as needed. This is the markup used in the example.

     <div >       <h2>Sidebar Title</h2>             <div >         <p>This is the content of the sidebar</p>               <p>And a little more<br />content for good measure.</p>       </div>             <div >       <p>A paragraph containing author information</p>       </div>     </div> 

The style sheet that pulls it all together applies images to the divs, the h2, and the paragraph (p) in the article footer. The style sheet also includes 2 em vertical margin shifts to compensate for a gap inserted by carriage returns in paragraphs. This measurement may need to change based on the font size and line height in your content, so be sure to test in several browsers, especially Internet Explorer. Note that this method is not supported by Netscape 4.

     div.sidebar {       background: url(top_left.gif) top left no-repeat;       width:35%; }           div.sidebar h2 {       background: url(top_right.gif) top right no-repeat;       font-size:1.3em;       padding:20px;       margin:0; }           div.content {       background: url(right_side.gif) top right repeat-y;       margin:0;       margin-top:-2em;       padding:20px; }           div.footer {       background: url(bottom_left.gif) bottom left no-repeat; }           div.footer p {       background: url(bottom_right.gif) bottom right no-repeat;       display: block;       padding: 20px;       padding-bottom: 30px;       margin:-2em 0 0 0; } 

This example appears in the article"CSS Design: Creating Custom Corners & Borders" by Sren Madsen, published in A List Apart, see also Dan Cederholm's article related to expanding rounded boxes entitled " Mountaintop Corners"(www.alistapart.com/articles/mountaintop/).