Rounded Corners Example

Yes, here is yet another approach to rounding the corners of a box. The box, to the right, has rounded corners. This is done with a single image and a bit of CSS. View the source code of this page to see how it was done. All the styles are included in the source code of the page. All of the styles pertaining to the rounded box begin with div#roundedbox.

The single image used for the corners is this one:

The image, above, is used as a background for the four corners. The only "trick" involved is sizing the corner containers and the use of background positioning to place the image in the proper position within those containers. The image is a circle, 32 pixels in diameter. Each of the corners is a <div> that 16 pixels square to show only one quarter of the image.

How is this done?

The first thing to do is fire up your image editing software. In your image editor, create a new image. The dimensions for the image should be such that the width and height are the same and are twice the radius you want for your rounded corners. In this case, we're using 16 pixels as the radius, so we made the image 32x32. Make the background of the image the same color as the background of the page (or container) where it will be displayed. Now, create a circle in that image that is the full width and height of the image. You want the edges of the circle to just tough all four sides of the image.

Now, all you need is a bit of HTML and CSS to display it as the background of the boxes. Here is what the CSS looks like:

   /* Set the box background color to the same color as the circle in the 
   image. Set the width, float and margins as desired. */
   div#roundedbox {
      background: #bcc1ff;
      float: right;
      margin: 0 0 0 1em;
      width: 175px;
   }
   /* Set the top and bottom height to be the same as the radius of the 
   circle (1/2 the size of the image). Set the font-size and line height
   to a sufficiently small number that they won't affect the box. */
   div#roundedbox #top, div#roundedbox #bottom {
      font-size: 1px;
      height: 16px;
      line-height: 1px;
   }
   /* Now, we'll do the four corners. Set each of them to the same width 
   and height as the radius of the circle. For the top left and bottom 
   left, set them to float: left. Set the top right and bottom right to
   float: right. Use the same background image for all four corners and
   set them all to no-repeat. Set the background position to the same as
   the position of the corner. */
   div#roundedbox #topleft {
      background: url(/images/corners.gif) no-repeat top left;
      float: left;
      height: 16px;
      width: 16px;
   }
   div#roundedbox #topright {
      background: url(/images/corners.gif) no-repeat top right;
      float: right;
      height: 16px;
      width: 16px;
   }
   div#roundedbox #bottomleft {
      background: url(/images/corners.gif) no-repeat bottom left;
      float: left;
      height: 16px;
      width: 16px;
   }
   div#roundedbox #bottomright {
      background: url(/images/corners.gif) no-repeat bottom right;
      float: right;
      height: 16px;
      width: 16px;
   }
   /* Now, well add one more box for the content to keep from having
   too much space at the top and bottom and to give it just a little
   bit of left and right padding. Given our 16 pixel radius corners, 
   we're using -1em for the top and bottom margins. That will allow 
   the content to expand into the top and bottom <div> tags. We also 
   add 1em of left and right margin to keep the content from butting
   right up against the edges. Adjust these figures to give you a
   result that you find pleasing. */
   div#roundedbox #boxcontent {
      margin: -1em 1em;
   }
   /* Finally, well give paragraphs in the box a little smaller top 
   and bottom margin just to keep things tight. */
   div#roundedbox p {
      margin: .5em 0;
   }

Okay, I know the CSS looks like a lot of code, but most of it is just the comments I placed in it so you could see what it was doing. Now, for the HTML, we have an arrangement like this:

   <div id="roundedbox">
      <div id="top">
         <div id="topleft">&nbsp;</div>
         <div id="topright">&nbsp;</div>
      </div>
      <div id="boxcontent">
         <p>Your content here.</p>
      </div>
      <div id="bottom">
         <div id="bottomleft">&nbsp;</div>
         <div id="bottomright">&nbsp;</div>
      </div>
   </div>
	

It's not startingly elegant, but it works. A box with rounded corners. The purist will probably complain about having seven <div> tags that don't really serve a function, but what the heck. It works. It uses only a single image and that image is used as a background, because it doesn't serve any semantic purpose. The box reacts well to resizing and to resizing the text within it.