Single image rounded border box
There are plenty of ways to build rounded border boxes. I wanted to do so using a single background image (just for kicks). Naturally, I wanted to minimize excess markup. I also wanted the box to be elastic.
So here it is.
The basics
The image I created was basically an oversized rounded border box with a transparent content area surrounded by a white background and drop-shadow.
The markup goes a little something like this:
<div class="box">
<div class="box_head"><h2>Test Title</h2></div>
<div class="box_content">
<p>
1 Proin at eros non eros adipiscing mollis. Donec semper
turpis sed diam. Sed consequat ligula nec tortor. Integer
eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum
ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque
neque. Nulla luctus erat vitae.
</p>
</div>
</div>
And the css:
* { margin: 0; padding: 0; }
.box {
width: 25em;
background: url(rounded_corners.png) no-repeat bottom right;
}
.box_head {
background: url(rounded_corners.png) no-repeat top right;
padding-right: 25px;
}
.box_head h2 {
background: url(rounded_corners.png) no-repeat top left;
padding-left: 25px;
min-height: 25px;
}
.box_content {
background: url(rounded_corners.png) no-repeat bottom left;
padding: .7em 0 1.5em 25px;
margin-right: 25px;
}
The decoration
I then added a few more classes to describe the various content styles I wanted applied.
p { margin: 1em 0; }
.bg_green { background-color: #7a9; }
.bg_tan { background-color: #ffe; }
.bg_red { background-color: #922; }
.bg_gray { background-color: #eee; }
.fg_white { color: #fff; }
.fg_red { color: #d99; }
.fg_dgray { color: #444; }
.bg_gray .box_head h2 {
font-family: Monotype Corsiva, monospace;
letter-spacing: 1ex;
padding-top: 1ex;
}
.bg_gray .box_content {
padding-top: 0;
}
.head {
text-align: center;
font: bold 120%/1.3 Verdana, Arial, sans-serif;
}
.head h2 {
padding-top: .2em;
}
.horz_center {
margin-right: auto;
margin-left: auto;
}
.vert_margin {
margin-top: 2em;
margin-bottom: 2em;
}
And added them to the div.box and div.box_head class attributes.
<div class="box bg_tan horz_center vert_margin">
<div class="box_head head bg_green fg_white">
...
Keeping the structural css separate affords me the flexibility to decorate the header and content areas differently.
IE compliance
IE7 supports png alpha transparency natively, but previous versions don't. Since the AlphaImageLoader filter doesn't allow for positioning, I just created a gif version of the same image and served that up for IE using the single stylesheet conditional comments method.
Markup
<body lang="en">
<!--[if lt IE 7]><div class="IE"><![endif]-->
...{content}...
<!--[if lt IE 7]></div><![endif]-->
</body>
CSS
.IE .box,
.IE .box_head,
.IE .box_head h2,
.IE .box_content {
background-image: url(rounded_corners.gif);
}
