October 24, 2009

Box with Round Corners Using CSS and Images - Part 2

This is another technique for creating round corners using CSS and images. This technique uses nine nested DIVs and images that are positioned and tiled using CSS background-position and background-repeat properties. It does not use any absolute positioning, margin positioning or hacks. As usual, I will first outline the features and limitations of the technique:

Pros

  • Clean and tidy, table-less HTML markup
  • Hack-less CSS
  • Fluid width layout, adaptable to fixed width layouts as well
  • No JavaScript required
  • Known to work in most standards compliant browsers
  • CSS markup is independent of the images size
  • Can actually be used to create CSS fancy borders and frames (see examples below)

Cons

  • Requires nine images, nine is too many!
  • Requires nine nested DIVs, harder to manage
  • Transparent images do not work well
  • May not work all that well in IE7 and earlier versions

The HTML/CSS Layout

Below is the HTML layout and CSS styles for the round corners. There are nine DIVs and images that are required to complete the layout. Each DIV behaves like a layer that contains a positioned/tiled image as the background. Together, they form a complete round-corner frame for the content.

Note: For clarity, I have used inline CSS styles. You are encouraged to convert it to classes.

<div style="background-image: url(http://4.bp.blogspot.com/_GZzKwf6g1o8/SuKVY0cwV-I/AAAAAAAAAw4/z-SoHs7VAhQ/s1600/ninecorner-01-middle.gif);">
  <div style="background-image: url(http://3.bp.blogspot.com/_GZzKwf6g1o8/SuKVWguML8I/AAAAAAAAAwg/pTEiK4C8DSs/s1600/ninecorner-01-left.gif); background-repeat: repeat-y; background-position: left;">
    <div style="background-image: url(http://3.bp.blogspot.com/_GZzKwf6g1o8/SuKVZqkIzSI/AAAAAAAAAxA/kucY3JSkn7w/s1600/ninecorner-01-right.gif); background-repeat: repeat-y; background-position: right;">
      <div style="background-image: url(http://2.bp.blogspot.com/_GZzKwf6g1o8/SuKVhqBvoeI/AAAAAAAAAxY/TmQZ7k5RLKQ/s1600/ninecorner-01-top.gif); background-repeat: repeat-x; background-position: top;">
        <div style="background-image: url(http://1.bp.blogspot.com/_GZzKwf6g1o8/SuKVVzyZB3I/AAAAAAAAAwY/iRpx1U9OkZc/s1600/ninecorner-01-bottom.gif); background-repeat: repeat-x; background-position: bottom;">
          <div style="background-image: url(http://3.bp.blogspot.com/_GZzKwf6g1o8/SuKVYKuK6_I/AAAAAAAAAww/hTglg-0J39M/s1600/ninecorner-01-left-top.gif); background-repeat: no-repeat; background-position: left top;">
            <div style="background-image: url(http://2.bp.blogspot.com/_GZzKwf6g1o8/SuKVgOGlR7I/AAAAAAAAAxQ/FaAYv707ZJQ/s1600/ninecorner-01-right-top.gif); background-repeat: no-repeat; background-position: right top;">
              <div style="background-image: url(http://2.bp.blogspot.com/_GZzKwf6g1o8/SuKVXYrEWLI/AAAAAAAAAwo/HqMcGdVofdw/s1600/ninecorner-01-left-bottom.gif); background-repeat: no-repeat; background-position: left bottom;">
                <div style="background-image: url(http://4.bp.blogspot.com/_GZzKwf6g1o8/SuKVbPl_ZGI/AAAAAAAAAxI/vKrzkilpW0c/s1600/ninecorner-01-right-bottom.gif); background-repeat: no-repeat; background-position: right bottom;">
                  <div style="padding: 20px;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae rutrum erat. Duis convallis turpis in ante tempus ornare. Vivamus fermentum quam ac ligula dapibus euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/><br/>
                    Donec sit amet rhoncus ante. Sed luctus nunc id mauris eleifend sit amet faucibus nisl pharetra. Curabitur urna nunc, auctor nec hendrerit quis, feugiat quis eros. Fusce sed nisl nisl. Vestibulum at egestas tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vel sem non velit scelerisque pulvinar.<br/><br/>
                    Vestibulum at egestas tortor. Proin mauris nulla, porta id aliquet eget, cursus et nulla. Aenean lorem erat, sagittis a interdum ac, accumsan in lacus. Vivamus fermentum quam ac ligula dapibus euismod. In at nisl metus, eu tempor erat.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae rutrum erat. Duis convallis turpis in ante tempus ornare. Vivamus fermentum quam ac ligula dapibus euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Donec sit amet rhoncus ante. Sed luctus nunc id mauris eleifend sit amet faucibus nisl pharetra. Curabitur urna nunc, auctor nec hendrerit quis, feugiat quis eros. Fusce sed nisl nisl. Vestibulum at egestas tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vel sem non velit scelerisque pulvinar.

Vestibulum at egestas tortor. Proin mauris nulla, porta id aliquet eget, cursus et nulla. Aenean lorem erat, sagittis a interdum ac, accumsan in lacus. Vivamus fermentum quam ac ligula dapibus euismod. In at nisl metus, eu tempor erat.

Here are a few examples that demonstrate how you can use this technique to create effects other than round corners.

Example 1



This example shows you that it is possible to use the full width and/or height of the div, even if you use large corner images. A padding of 5x10px is used on this box to keep the text sufficiently away from the corners. However, the size of each corner image is 20x20px.

To see if this technique works with fluid width layouts:
  •  Click here to randomize the width of the box
  •  Click here to reset

Example 2



This example shows that it is possible to display a shadow on all sides of the box. An 8 pixel black-to-transparent gradient shape-burst stroke is used to generate this effect using Photoshop.

This blog uses a variation of this technique.

Example 3



This example demonstrates regular drop shadow effect.

Example 4



The possibilities are endless, just be creative.

Compatibility

This round corners technique is known to work in most modern browsers, including IE 8, Firefox 2, Google Chrome 1, Safari 3, Opera 7 and Navigator 9. The technique works in IE7 and earlier under certain conditions. If you can workaround the double margin/double padding bug in IE, you should be able to get this technique to work.