Rounded Corners With Pure CSS!

Here is a working example.

I'm not to sure how practical this is, but either way, it's still really cool! Some will love it and others will hate it. All things considered though, this code is pretty darn clean!

The html

<div class="container">
<b class="top">
<b class="px1"></b> 
<b class="px2"></b> 
<b class="px3"></b> 
<b class="px4"></b>
</b>
<h2>Rounded Corners With Pure CSS!</h2>
<b class="bottom">
<b class="px4"></b> 
<b class="px3"></b> 
<b class="px2"></b> 
<b class="px1"></b>
</b>
</div>

The CSS

body {
	background: #888;
}
h2 {
	margin: 75px 0 95px;
	text-align: center;
	font-size: 1.2em;
}
.container {
	width: 325px;
    margin: 50px auto;
    background: #CCC;  
}
.top, .bottom {
	display: block;
	background: #888;
}
.top *, .bottom * {
	display: block;
	height: 1px;
	overflow: hidden;
	background: #CCC;
}
.px1{margin: 0 5px}
.px2{margin: 0 3px}
.px3{margin: 0 2px}
.px4{margin: 0 1px; height: 2px}