Rounded corners using nothing but CSS

May 21st, 2008 | Extras

Rounded corners structure

Recently I was working on iPhone-specific web-based login pages, and for the sake of consistency I wanted to mimic the rounded-corner look of the iPhone interface.
I looked around for solutions, but everything I could find either used images, Javascript or both, which seemed like serious overkill for this purpose.

Long story short, I ended up putting (hacking?) together my own solution, one which relies solely on CSS to render the rounded corners, using the structure shown in the image to the right. The end result looks something like THIS and it works in both IE and Firefox.

I think it's a fairly elegant way to do this, and I'm pretty sure somebody else somewhere must have figured this out already (considering the number of people who are significantly better at CSS than I am) but since I couldn't find anything similar out there, I decided to share it here.

The complete CSS/HTML template is as follows:

<html>
<head>
<title>CSS-only rounded corners --- edvardtoth.com</title>
</head>
<body>
<style type="text/css">
 
body {
	 text-align: center;
	 background: #f0f0f0;
}
 
.container {
	text-align: center;
	background: transparent;
	width: 250px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
 
.content {
	background: #b80000;
	color: #f0f0f0;
	font-family: "Trebuchet MS", Verdana, Tahoma;
	font-size: 14pt;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
}
 
/* classes for rounded corners */
 
.crntop, .crnbottom {
    display:block; 
    background:transparent; 
    font-size:1px;
}
.crn1, .crn2, .crn3, .crn4, .crn5, .crn6 {
    display:block; 
    overflow:hidden;
}
.crn2, .crn3, .crn4, .crn5, .crn6 {
    background:#b80000; 
    border-left:1px solid #000000;
    border-right:1px solid #000000;
}
.crn1 {
    height:1px; 
    margin:0 9px; 
    background:#000000;
}
.crn2 {
    height:1px; 
    margin:0 6px;
    border-width:0 3px;
}
.crn3 {
    height:1px; 
    margin:0 4px;
    border-width:0 2px;
}
.crn4 {
    height:1px; 
    margin:0 3px;
    border-width:0 1px;
}
.crn5 {
    height:2px; 
    margin:0 2px;
    border-width:0 1px;
}
.crn6 {
    height:3px; 
    margin:0 1px;
    border-width:0 1px;
}
</style>
<div class="container">
 
<span class="crntop"><span class="crn1"></span><span class="crn2">
</span><span class="crn3"></span><span class="crn4"></span><span class="crn5"></span><span class="crn6"></span></span>
<div class="content">CSS-only rounded corners</div>
 
<span class="crnbottom"><span class="crn6"></span><span class="crn5"></span><span class="crn4"></span><span class="crn3"></span>
<span class="crn2"></span><span class="crn1"></span></span>
</div>
 
</body>
</html>