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)

Search

Feeds

RSS 2.0 feed All content
RSS 2.0 feed ajax
RSS 2.0 feed asp
RSS 2.0 feed aspnet
RSS 2.0 feed bicycle
RSS 2.0 feed copenhagen
RSS 2.0 feed databases
RSS 2.0 feed denmark
RSS 2.0 feed diy
RSS 2.0 feed dotnet
RSS 2.0 feed html
RSS 2.0 feed japan
RSS 2.0 feed javascript
RSS 2.0 feed modding
RSS 2.0 feed photography
RSS 2.0 feed utilities
RSS 2.0 feed vbscript