O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Rounding Corners (Sliding Doors Technique)

Problem

You want to round corners in columns that have flexible widths.

Solution

Use the Sliding Doors technique that was made popular by web designer Douglas Bowman.

Create the design of the rounded corners, as shown in Figure 4-31.

The basic design for the column

Figure 4-31. The basic design for the column

Then create separate graphics for the four corners, as shown in Figure 4-32.

Wrap the content that is in the column with additional div elements:

<div id="box">
 <div id="innerhead">
  <h2>
   I Met a Girl I&#8217;d Like to Know Better
  </h2>
 </div>
 <div id="content">
  <div id="innercontent">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam.</p>
  </div>
 </div>
</div>
The column design split up into four graphics

Figure 4-32. The column design split up into four graphics

Then place the background images through CSS, as shown in Figure 4-33. The top-left corner goes in the innerhead id selector, the top-right corner slides into the preexisting h2 element, the content id selector gets the bottom-left selector, and the innercontent id selector houses the bottom-right graphic:

#innerhead {
 background-image: url(corner_tl.gif);
 background-position: top left;
background-repeat: no-repeat;
}
h2 {
 background-image: url(corner_tr.gif);
 background-position: top right;
 background-repeat: no-repeat;
 margin: 0;
 padding: 7px;
 border-bottom: 1px solid #999;
 font-size: 1.3em;
 font-weight: normal;
 color: #eee;
}
#content {
 background-image: url(corner_bl.gif);
 background-position: bottom left;
 background-repeat: no-repeat;
}
#innercontent {
 background-image: url(corner_br.gif);
 background-position: bottom right;
 background-repeat: no-repeat;
}
Rounded corners appearing on the column

Figure 4-33. Rounded corners appearing on the column

Discussion

The div and h2 elements act as hooks to add background images to all four corners of the column. As the browser resizes, the background images stay in their respective corners, as shown in Figure 4-34.

Rounded corners maintained, even though the column expands

Figure 4-34. Rounded corners maintained, even though the column expands

To make sure the design integrity is maintained as the column expands, further digital image editing is required. Manipulate one side, either the left or the right, and expand the two graphics both vertically and horizontally. For example, the bottom-right and bottom-left graphics (see Figures 4-35 and 4-36) were expanded for this Solution.

The bottom-right graphic, which is 600 pixels wide and more than 250 pixels tall

Figure 4-35. The bottom-right graphic, which is 600 pixels wide and more than 250 pixels tall

The bottom-left graphic, which is 600 pixels wide and 600 pixels tall

Figure 4-36. The bottom-left graphic, which is 600 pixels wide and 600 pixels tall

See Also

Setting Up Different Types of Stylesheets for a simple solution to rounding corners of a column

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required