March 2, 2009

Box with Round Corners Using CSS and Images

This is yet another lean-and-mean technique for creating round corners using CSS and images. It uses negative margins to position the corner images. I will first outline the features and limitations of the technique:

Pros

  • Clean and tidy, table-less HTML markup
  • Hack-less CSS markup
  • Uses four, non-transparent images
  • Fluid width design that can be converted to fixed width with extreme ease
  • No JavaScript required
  • Known to work in most standards compliant browsers

Cons

  • Requires four carefully crafted images
  • Transparent images do not work well
  • Too much inter-dependency between the images and CSS markup — both need to be tweaked in order to customize the colors

Draft Layout

The layout uses a wrapper div (the "round-cornered" div) with five child divs (explained below). In addition, four round corner images are used; one for each corner.

1: Top Left Corner (uses a 1180x20px image as background)


2: Top Right Corner (uses a 20x20px right-aligned image as background)


3: Content (uses CSS borders instead of image borders)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.



4: Bottom Left Corner (uses a 1180x20px image as background)


5: Bottom Right Corner (uses a 20x20px right-aligned image as background)

The images used for the round corners must be carefully crafted. The top-left and bottom-left corner images should be "very" wide. A width of 1600 pixels is recommended so that the corner image covers the entire width of the round-cornered box on a variety of display resolutions.

The images used in the example are generated using Adobe Photoshop 7. In summary, it is a 1200x40px image, that has a white background layer and a shape layer containing a 1200x40px rounded rectangle (corners are rounded 8px). An orange stroke of width 2px is applied to the rounded rectangle on the inside. The image is finally divided into four slices: two 1180x20 and two 20x20 slices.

CSS Definition

<style type="text/css">
  .round-cornered
  {
  }
  .round-cornered .c1
  {
    height: 20px;
    background: url(box-c1.gif);
  }
  .round-cornered .c2
  {
    margin-top: -20px;
    height: 20px;
    background: url(box-c2.gif) right no-repeat;
  }
  .round-cornered .c3
  {
    height: 20px;
    background: url(box-c3.gif);
  }
  .round-cornered .c4
  {
    margin-top: -20px;
    height: 20px;
    background: url(box-c4.gif) right no-repeat;
  }
  .round-cornered .in
  {
    border-left: 2px solid #FF9900;
    border-right: 2px solid #FF9900;
    padding-left: 18px;
    padding-right: 18px;
    color: #FFFFFF;
    background: #000000;
  }
</style>

Notice how the styles for the inside section (.round-cornered .in) are chosen. The background color matches the background of the image (#000000). The border color and width matches the color and width of the border stroke (#FF9900, 2px). And finally the padding is adjusted so that border + padding (2px + 18px) is equal to the desired size of the corner (20px).

HTML Code

<div class="round-cornered">
  <div class="c1"></div>
  <div class="c2"></div>
  <div class="in">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="c3"></div>
  <div class="c4"></div>
</div>

Example 1: Fluid Width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius, augue pharetra rhoncus ultrices, mauris nunc dictum ante, ac semper ipsum ipsum eu massa. Proin id odio a felis feugiat tempor. Praesent rutrum nulla ac justo molestie tempus. Cras quis augue. Nulla eleifend, mi id molestie fringilla.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam vel tortor.

The default settings result in a fluid round-cornered div that covers all available width.

Example 2: Fixed Width, Center Aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius, augue pharetra rhoncus ultrices, mauris nunc dictum ante, ac semper ipsum ipsum eu massa.

Nunc non metus. Ut massa turpis, interdum vitae, porta eget, faucibus ut, metus. Vestibulum non sapien et felis scelerisque mollis.

The round-cornered div has style="width: 400px; margin-left: auto; margin-right: auto;" applied on it.

Example 3: Fixed Width, Floated

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius, augue pharetra rhoncus ultrices, mauris nunc dictum ante, ac semper ipsum ipsum eu massa.

Nunc non metus. Ut massa turpis, interdum vitae, porta eget, faucibus ut, metus. Vestibulum non sapien et felis scelerisque mollis.
Nunc non metus. Ut massa turpis, interdum vitae, porta eget, faucibus ut, metus. Vestibulum non sapien et felis scelerisque mollis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius, augue pharetra rhoncus ultrices, mauris nunc dictum ante, ac semper ipsum ipsum eu massa.

The round-cornered divs have style="width: nnpx; float: left; margin-left: nnpx;" applied on them.

Compatibility

This round corner technique is known to work on the following browser-platforms:

  • chrome 1.0, Windows
  • firefox 2.0, BSD
  • firefox 2.0, Linux
  • firefox 3.0, Mac OS
  • firefox 1.5, Windows
  • flock 2.0, Linux
  • flock 2.0, Windows
  • msie 5.0, Windows (under certain conditions)
  • msie 5.5, Windows (under certain conditions)
  • msie 6.0, Windows (under certain conditions)
  • msie 7.0, Windows
  • navigator 9.0, Linux
  • navigator 9.0, Windows
  • opera 9.6, Linux
  • opera 7.0, Windows
  • safari 3.2, Mac OS
  • safari 3.2, Windows
  • seamonkey 1.1, BSD
  • seamonkey 1.1, Linux
  • seamonkey 1.1, Windows
Problems with Internet Explorer Version 6 and earlier

Internet Explorer versions <= 6 will render the round corners incorrectly if the round corners are shorter than a certain height. IE6 and earlier versions will render empty divs with a forced minium height which is roughly equal to the div's line height. This will result in an output such as this:

IE6 assigns height to empty divs

The example uses round corners with a height of 20px which is sufficient enough for font-sizes upto 16px. If you need to use shorter images and/or taller fonts, you will have to tweak the CSS.