10.6 Rounded Corners without Images

This is a fairly well known technique that doesn not need images and uses pure CSS to produce round corners for any width container. The downside is that the HTML requires quite a bit of extra markup ;however, it does work pretty well. The technique basically involves using several empty <b> tags layered on top of each other with decreasing side margins. Any inline tag would do but the bold tag is nice and short to write. The trick involves creating lines stacked up on one another to create emulated round corners. The HTML goes like this:

<b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>
<div class="content">Content goes here...</div>
<b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>

The CSS is as follows:

.r1, .r2, .r3, .r4	{overflow:hidden;display:block;background:#ddd;}

.r1  			{height:1px;margin:0 5px;}

.r2  			{height:1px;margin:0 3px;}

.r3  			{height:1px;margin:0 2px;}

.r4 			{height:2px;margin:0 1px;}

.content		{background:#ddd;padding:20px;}

This would look like this in a browser:

Content goes here...

And how does it work? The bold tags are set to display:block so that they fill the available space, and only 1px is displayed so as to create a series of horizontal lines, each a different length thanks to their differing margins. The offsets at the corners provide the radii. This is easier to understand if we change the colour of each line (by adding a different background colour into r1, r2, r3 & r4:

Content goes here...

A border can be added if required (HTML markup is the same):

.r1, .r2, .r3, .r4 	{overflow:hidden;display:block;}

.r1 			{background:#888;
			 height:1px;
			 margin:0 5px;}

.r2 			{background:#ddd;
			 border-right:2px solid #888;
			 border-left:2px solid #888;
			 height:1px;
			 margin:0 3px;}

.r3 			{background:#ddd;
			 border-right:1px solid #888;
			 border-left:1px solid #888;
			 height:1px;
			 margin:0 2px;}

.r4 			{background:#ddd;
			 border-right:1px solid #888;
			 border-left:1px solid #888;
			 height:2px;
			 margin:0 1px;}

.content 		{background:#ddd;
			 border-right:1px solid #888;
			 border-left:1px solid #888;}

This would look like this in a browser:

Content goes here...

And we can also have a different coloured header section. A little more markup is required first:

<b class="r1h"></b><b class="r2h"></b><b class="r3h"></b><b class="r4h"></b>
<div class="header">Header goes here...</div>
<div class="content">Content goes here...</div>
<b class="r4b"></b><b class="r3b"></b><b class="r2b"></b><b class="r1h"></b>

And the CSS is:

.r1h, .r2h, .r3h, .r4h, .rb2, .r3b, .r4b 	{overflow:hidden;
					display:block;}

.r1h 			{height:1px;
			 background:#aaa;
			 margin:0 5px;}

.r2h, .rb2 		{height:1px;
			 background:#aaa;
			 border-right:2px solid #aaa;
			 border-left:2px solid #aaa;
			 margin:0 3px;}

.r3h, .rb3 		{height:1px;
			 background:#aaa;
			 border-right:1px solid #aaa;
			 border-left:1px solid #aaa;
			 margin:0 2px;}

.r4h, .rb4 		{height:2px;
			 background:#aaa;
			 border-right:1px solid #aaa;
			 border-left:1px solid #aaa;
			 margin:0 1px;}

.r2b, .r3b, .r4b  	{background:#ddd;}

.header  		{background:#aaa;
			 border-right:1px solid #aaa;
			 border-left:1px solid #aaa;}

.header h3 		{margin:0px 10px 0px 10px;
			 padding-bottom:3px;}

.content 		{background: #ddd;
			 border-right:1px solid #aaa;
			 border-left:1px solid #aaa;}

.contenth div 		{margin-left:12px;
			 padding-top:5px;}

This would look like this in a browser:

A header

Some content...

As well as the extra markup that is required, another drawback is the sharpness of the corners. Images will produce smoother, anti-aliased corners, especially if largers corners are required. However, if the corners are fairly small this technique works fine.