Creating Multiple Box Effect

I wanted to be able to create this effect using just CSS, without images:

https://dl.dropbox.com/u/76571269/sitepoint.jpg

I know there is probably a way by using more than one DIV, but my intention is to have a single DIV and use the :after pseudo-class so that I’d preserve much of the mark-up.

Does anybody have any advice on pulling such a stunt off.

Something like this perhaps.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.box {
	border:1px solid #ccc;
	width:800px;
	margin:auto;
	position:relative;
	padding:10px;
	background:#fff;
}
.box:after, .box:before {
	content:" ";
	display:block;
	position:absolute;
	bottom:-7px;
	left:5px;
	right:5px;
	height:5px;
	border:1px double #ccc;
}
.box:before {
	left:10px;
	right:10px;
	bottom:-13px;
}
</style>
</head>

<body>
<div class="box">
		<h1>Box test</h1>
		<p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>
</div>
</body>
</html>


It should work from IE8+. You can add support for ie7 with expressions if you need to.