Mountaintop Corners

Either I’ve never bothered to try easier methods for creating rounded corners, or I am not afraid of having horrible eyesight in a mere five to eight years.  Regardless, one of my most oft-used little image creation tricks has to do with mountaintops: want that corner a little rounder? Just add another peak. This will begin to make sense in just a moment.

Figure 1

Consider Figure 1.  A boring, square box with a single pixel removed from each corner.  When viewed at 100%, the absence of that one pixel creates the illusion that the box is ever-so-slightly rounded. It’s one of those techniques that’s been used since TRON was cutting-edge.

Fewer pixels = more round#section2

You can take the illusion even further though, by removing more pixels and creating “mountaintops” (and you thought it was just a silly title).  Take a look at Figure 2 and you’ll see a zoomed-in view of a box corner, with several pixels removed to form a jagged, diagonal landscape. When viewed at 100%, the corner appears nicely rounded.

Figure 2

For lighter backgrounds, you can remove yet a few more pixels to create an even more rounded effect.  By creating a jagged diagonal as we had done previously and then removing one extra pixel at either end we can smooth the edge a bit (see Figure 3).  Anything with three mountaintops or more usually requires this extra pixel of space and works especially nicely with a light color that blends with the main page background.

Figure 3

Transparent peaks#section3

At this point, you may be saying “Dan, this is a stupidly simple technique.”  And it is. But the real value in using the pencil tool to shave off pixels when a rounded corner is desired (aside from the odd pleasure you might receive in doing so) is the combination of transparency and CSS to create boxes and borders that can change in size and color.

Because mountaintop corners utilize only two colors, we can set one of those colors as transparent, leaving the mountaintops the same color as the page background, thereby creating the rounded effect.

A flexible chameleon#section4

For example, let’s take an ordinary defintion list (<dl>) of items, and set a top and bottom background-image of transparent, rounded corners.  We can then assign a background-color with CSS and change the entire box’s appearance at will.

The semantic markup would look like this:

  
Mt. Everest
  
The tallest mountain in the world.
  
29,035 feet

You could, of course, use any structure you’d like, but the definition list structure gives us a pleasing number of elements to style with CSS.

Next, we’ll create a 240-pixel-wide image that will act as the top portion of the rounded box.  This image will be just tall enough to the contain white top corners at either end, while the rest will be transparent (where the background color that we’ll specify with CSS will show through).  Figure 4 shows a condensed and zoomed version of the image in order to show detail.

Figure 4 — Zoomed portions of top image

We’ll also create a similiar second image, flipped vertically for the bottom rounded corners.  The easiest way to do this in Photoshop is to choose Image › Rotate Canvas › Flip Canvas Vertical.

By assigning the top image as a background for the <dt> element, and the bottom image as a background for the entire <dl>, we’ll have a rounded box (fixed-width) that expands and contracts depending on the amount of content within — or if the user decides to bump up the text size.

dl {
  width: 240px;
  margin: 0 0 20px 20px;
  background: #999 url(box_bottom.gif)  »
  no-repeat bottom left;
  }dt {
  margin: 0;
  padding: 10px;
  background: #999 url(box_top.gif)  »
  no-repeat top left;
  }dd {
  margin: 0;
  padding: 10px;
  }

You’ll notice that I’ve used the shorthand method for specifying the background’s color along with its image for both the <dl> and <dt> elements. You’ll see why this has an advantage when we mix up the colors later on.

This example demonstrates the way that the CSS above sets the background images on either end of the box, while assigning a background color to shine through the transparent portions of the images.  I’ve also added some font styling and a decorative arrow image that sits to the left of each <dd> element.

Try increasing the text size for the example page to see how the boxes will expand and contract along with the text.

Climbing higher#section5

We can get even fancier by assigning differing background colors to the <dl> and <dt> elements.  This example shows how two different background colors with the addition of a white border-bottom for the <dt> element can be achieved from the same markup and images.

Additionally, we’re not limited to just rounded shapes.  As long as we stick to creating two-color GIFs, we can add any shape we’d like to the background images that flank the box. This final example shows how an alternate image is used for the bottom of the box, with the addition of a white mountaintop silhouette (see Figure 5).

Figure 5 — Alternate bottom image (zoomed) with mountain silhouette

Summary#section6

Because an element’s background-image sits on top of its background-color, we can use transparent GIF images that create the illusion of rounded or shaped corners and borders.  By keeping these decorative graphics within CSS, we can achieve flexible containers that can change color with the update of a single CSS rule.  Happy hiking.