Round corners on boxes of arbitrary sizes

It's a classic problem: You want to add round corners to html elements of varying shapes and sizes but would like to avoid making background images to fit all of the different widths.

Here is a method for applying scalable borders and corners using a generic set of border graphics, CSS and a couple of nested divs. The code has been tested successfully in Firefox, IE6/7/8, Chrome and Opera.

Try it in a popup window (resize the window to see the borders in action).

Download the example code

How it works: Basically, a combination of overlapping and repeating background images in nested divs are used to give the illusion of a single border outline.

If more than one box is needed on the same page in a column layout, set a width on the outermost div. The boxes can also be nested into each other.

CSS round corners diagram
When you replace the graphic elements with your own (for drop shadows and so on), be sure to update the 5px width/height values in the CSS with the dimensions of your new corner images.

The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Round corners example</title>
<link rel="stylesheet" href="roundbox.css" type="text/css" />
</head>
<body>
<div class="roundbox">
  <div class="roundbox-top">
    <div class="roundbox-top-corner"></div>
  </div>
  <div class="roundbox-content">
    Content goes here.
  </div>
  <div class="roundbox-bottom">
    <div class="roundbox-bottom-corner"></div>
  </div>
</div>
</body>
</html>

The CSS:

.roundbox {
  float: left;
  background-image: url('pics/border_right.gif');
  background-repeat: repeat-y;
  background-position: top right;
  }

.roundbox-top {
  height: 5px;
  background-image: url('pics/border_top.gif');
  background-repeat: no-repeat;
  background-position: top left;
  font-size: 6px; /* only needed for IE6 compatibility */
  }

.roundbox-top-corner {
  float: right;
  width: 5px;
  height: 5px;
  background-image: url('pics/corner_upper_right.gif');
  }

.roundbox-bottom-corner {
  float: right;
  width: 5px;
  height: 5px;
  background-image: url('pics/corner_lower_right.gif');
  }

.roundbox-content {
  float: left;
  clear: both;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 2px;
  padding-bottom: 4px;
  background-image: url('pics/border_left.gif');
  background-repeat: repeat-y;
  background-position: top left;
  }

.roundbox-bottom {
  clear: both;
  height: 5px;
  background-image: url('pics/border_bottom.gif');
  background-repeat: no-repeat;
  background-position: bottom left;
  font-size: 6px; /* only needed for IE6 compatibility */
  }

As a final note, it should be mentioned that all this will be easier in the future. With CSS 3, rounded borders can be simply declared with the attribute "border-radius". But for now, support for "border-radius" is missing in Internet Explorer, making the above method the best option for broadest compatibility.
Tags: html
Page last updated 2010-04-27 19:38. Some rights reserved (CC by 3.0)