"Sliding Doors" Box– Rounded Corners for All

 A Simple, Semantically Correct CSS Box with Clean Code

final update (Jan 23, 2006): The revised, one-image technique is finally complete!

View the long-promised and finally updated
Simple Rounded Corner CSS Boxes blog entry
at the MODx Content Management System and
PHP Application Framework site.

The information below will remain for historical perspective...

update 2: The code update is now complete and will be posted in the coming weeks at its new permanent home at Vertexworks, my new employment adventure. I'll email everyone that has inquired or sent feedback in the year(!) since I first came out with this. In the meantime, if anyone wants the PSD file that I used to create the graphics for this, feel free to download it and use as you see fit. A link back to my new website would be appreciated (http://vertexworks.com/) although certainly not required.

update: I'll be working on an update to this technique soon using fewer images, better instructions based on all the feedback I've received and downloadable PhotoShop templates for the graphics.

While working on an e-commerce system, I wanted to use some neat CSS tricks for its sample XHTML/CSS template. This new cart will support styling the entire cart in a way similar to the CSS Zen Garden: strictly by altering the CSS. This technique will be used for the CSS template to replace the common osC-clone sideboxes found on virtually every other cart out there.

The goal of the exercise was to create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup. Oh yeah, and to make sure they could resize while keeping their backgrounds intact. The important relevant XHTML and CSS for the first box on this page is directly below the box.

Questions/Comments:

JavaScript must be enabled to display this email address.

The XHTML:

<div class="sidebox">
	<div class="boxhead"><h2>Test Headline</h2></div>
	<div class="boxbody">
		<p>This is a short sample paragraph.</p>
		<p>And another one.</p>
	</div>
</div>

The CSS:

/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

.sidebox {
	margin: 0 auto; /* center for now */
	width: 17em; /* ems so it will grow */
	background: url(sbbody-r.gif) no-repeat bottom right;
	font-size: 100%;
}
.boxhead {
	background: url(sbhead-r.gif) no-repeat top right;
	margin: 0;
	padding: 0;
	text-align: center;
}
.boxhead h2 {
	background: url(sbhead-l.gif) no-repeat top left;
	margin: 0;
	padding: 22px 30px 5px;
	color: white; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;
	text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody {
	background: url(sbbody-l.gif) no-repeat bottom left;
	margin: 0;
	padding: 5px 30px 31px;
}

For success, make sure your background images are large enough to grow however big you need them. The ones used in this demo are 600px tall for the lower div, for example.

Also note, any top margin on the top element (the upper <p> in this case) inside the lower div (.boxbody) will leak out in IE5/Win (and probably others) and seperate the two divs, breaking the box. To prevent this just remove that margin through adding a class to the element (or any other preferred method), and replace the margins with a top padding on the lower div (.boxbody).

IE5/Win also has a glitch in the upper left corner that can be fixed by applying a dimension to the <h2> element. In this demo it's done using the "Holly Hack", feeding a {height: 1%;} only to IE/win browsers. (see the code)

Known Issues

Issue #1: At certain font-scaling sizes in Gecko browsers, there is a 1px jog at the bottom-left. YMMV. This can be avoided by setting the font-size on the body to 100%, and sizing your text elsewhere...

Issue #2: The CSS won't validate because of the text-shadow used for Safari with transparency color. So much for "progressive enhancement".

Issue #3: The KHTML engine in Safari pre-Panther does not render this technique correctly. The backgrounds flow out of their containing boxes. Yet another reason to upgrade. ;) But considering there's now a cookie hijacking exploit with the browser, maybe they'll release an upgrade across the board.

The credit box below is unique in that it has no width specified. Its width is controlled only by the margins on its containing div (.sidebox). Resize the browser window to see it dynamically grow. This opens up a lot of interesting possibilities!