Picnic Website Code Tutorials

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}
		

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top Donators

Friends of Mine