CSS Containers: Fancier, Fixed Width, Rounded Corners

CSS HOWTOs Web Development

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;}


This is a quick and easy way to do something that looks better than a square box.

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">
<p>This is a quick and easy way to do something that looks better than a square box.</p>
<div class="roundedBoxBottom"></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.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Busy Busy…

It is now after 8pm and I just got through my email for the day. I am not sure how it is with other self employed people, but by far Monday is always the busiest day. Time to sit back and watch some Big Love before I have to enjoy a day full of meetings. […]


tagging with tivo!

I recently got a second TiVo and hooked it up last night and to my delight, when I upgraded the software, I found out that I could now use tags with TiVo. First tag I will put in? “Sela Ward” followed by “Chicago”. I am a nut for Sela’s work as well as all movies/shows […]