jappler.com

I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the second of 4 articles in a series on how to create various CSS rounded corner or “fancier than a simple box” container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I created this code from scratch and use this for any fancier fix width boxes I might need for sites I create. Height is not fixed. (Also see css containers: simple, fixed width, rounded corners.)

The container:

.roundedBox {width:300px;}
.roundedBoxTop{height:10px; background: url(“/downloads/rounded-corners/top-rounded.gif”) no-repeat bottom;}
.roundedBoxMiddle{background: url(“/downloads/rounded-corners/middle-rounded.gif”) repeat-y; padding:0 10px 0 10px;}
.roundedBoxMiddle p {margin:0; padding:0;}
.roundedBoxBottom{height:15px; background: url(“/downloads/rounded-corners/bottom-rounded.gif”) no-repeat top;}

The code:

.roundedBox {width:300px;}
.roundedBoxTop{height:10px; background: url("/downloads/rounded-corners/top-rounded.gif") no-repeat bottom;}
.roundedBoxMiddle{background: url("/downloads/rounded-corners/middle-rounded.gif") repeat-y; padding:0 10px 0 10px;}
.roundedBoxMiddle p {margin:0; padding:0;}
.roundedBoxBottom{height:15px; background: url("/downloads/rounded-corners/bottom-rounded.gif") no-repeat top;}
<div class="roundedBox">
<div class="roundedBoxTop"></div>
<div class="roundedBoxMiddle">
<h2>Content</h2>
<p>This is a quick and easy way to do something that looks better than a square box.</p>
</div>
<div class="roundedBoxBottom"></div>
</div>

General Information:
This is based on a simple graphic I created in Photoshop using the rounded corner box tool, a drop shadow, a stroke, and a left to right gradient. I then cut it up into three pieces: top, middle, bottom. *The .roundedBoxMiddle p {margin:0; padding:0;} is specific to my layout and is not needed if you want to use this.