How does it work?

Step 1

• Create a basic container with a border, and some contents

• <style type="text/css">
  	.rounded {
  		border: 1px solid #beceda;
  		zoom:1; /* causes IE to behave properly */
  	}
  </style>
  
  <div class="rounded" style="width: 600px">
      <p>Example text</p>
  </div>
  				

• Example text

Step 2

• Add 4 nested divs to the current container, between the border and content

• <div class="rounded" style="width: 600px">
      <div><div><div><div>
          <p>Example text</p>
      </div></div></div></div>
  </div>
  				

• Example text

Step 3

• Add classes to these divs, and define the classes in the style section

• <style type="text/css">
  	.tl {background: url(tl.gif) no-repeat top left;
  	     margin:-1px; } /* the margin pushes the container 
  	                       out 1px to line up borders */
  	.tr {background: url(tr.gif) no-repeat top right;}
  	.br {background: url(br.gif) no-repeat bottom right;}
  	.bl {background: url(bl.gif) no-repeat bottom left;}
  	
  	.tr, .tl, .bl, .br {zoom:1;position:relative;}
  </style>
  
  <div class="rounded" style="width: 600px">
      <div class="tl"><div class="tr"><div class="br"><div class="bl">
          <p>Example text</p>
      </div></div></div></div>
  </div>
  				

• Example text

Notes

• The 4 images are specially made to be a curve on the 1pixel solid border with a color of #beceda;
• To add space between the borders and the content text, you must add the padding to the bl div

Caveats

• The 4 corners are images with a solid outside, a border inside, and a transparent inside.
• This means we would need 4 new gifs for each background color or border style

Thanks

• FlamingFoo and saerdna_ on #css for all their help
• Peter Mueller (Munter) for the original page I worked from