Pure CSS Rounded-Corner Boxes Without Images (Including Minimum Height and Vertical Expansion Features)

See also CSS Rounded-Corner Boxes Using Images

These rounded-corner boxes have been created with pure CSS without images. They have a designated minimum height and they will expand vertically with added text. Both have been tested in IE6 and Firefox 1.6.

The code is quite cumbersome and ugly, and this is partly due to Microsoft's inability to adhere to proper web standards, but more importantly it provides a lot of flexibility for altering the look of the boxes.

Both use absolute positioning. If you remove the absolute positioning tags (position:absolute; top:10px; left:10px;) you can easily float the boxes so that they sit on top of each other. Or you can add float:left to float them side by side.

Simon Schofield

CSS Code

/* common tags for rounded corners that can be used for many panels */
b.Rnd1{margin: 0 5px;}
b.Rnd2{margin: 0 3px;}
b.Rnd3{margin: 0 2px;}

/* container one */
div.ContainerOne {position:absolute; top:10px; left:10px; width:200px; height:200px; background: #DDA0DD;} /* adjust the position, size and colour of the panel here */
div[class="ContainerOne"] {height:auto; min-height:200px;} /* adjust the minimum height of the panel here for mozilla only */
b.RndTopOne b, b.RndBottomOne b{display:block;height: 1px; overflow: hidden; background: #DDA0DD} /* adjust the colour of the panel top and bottom here */
b.RndTopOne, b.RndBottomOne{display:block;background: #FFFFFF;} /* adjust the background colour here */
div.RPanelContentOne {position:relative; top:0px; left:0px; display:block; margin: 0 auto; margin-top:10px; margin-bottom:10px; width:160px; height:200px; text-align:left; color:#333333;} /* adjust the content width (to be slightly less than the panel width to get a margin), height and text alignment of the content here */
div[class="RPanelContentOne"] {height:auto; min-height:200px;} /* adjust the minimum height of the panel here for mozilla only */
b.RndTopOne b.Rnd4, b.RndBottomOne b.Rnd4{margin: 0 1px; height:2px;}

HTML Code

<!-- container one -->
<div class="ContainerOne">

    <b class="RndTopOne"><b class="Rnd1"></b><b class="Rnd2"></b><b class="Rnd3"></b><b class="Rnd4"></b></b>

    <div class="RPanelContentOne">

        <!-- your content goes here -->

    </div>

    <b class="RndBottomOne"><b class="Rnd4"></b><b class="Rnd3"></b><b class="Rnd2"></b><b class="Rnd1"></b></b>

</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Notice how this box remains at a minimum height?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Notice how this box has expanded vertically beyond the minimum height with the extra text?