Rounded Corners With Pure CSS Tutorial

View Demo

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}

ADVERTISE HERE