Box with rounded corners on CSS

Check out an example of text only rounded box corners with CSS.

Introduction

The solution was largely inspired by Nifty Corners. However, Nifty Corners use a couple of extra tags that we don't need (this example uses one wrapping container less). Also, no Javascript is used here. Anyway, it should be a good addition to other tutorials on this site, so why not.

The markup

The HTML markup is pretty simple:

<div class="container">
<div class="five"></div>
<div class="four"></div>
<div class="three"></div>
<div class="two"></div>
<div class="one"></div>
<div class="content">
Lorem ipsum dolor sit amet..
</div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>

As is CSS coding:

.container {width:10em;}
.one, .two, .three, .four, .five { height:1px;
 background:skyblue;}
.five {margin:0 5px;}
.four {margin:0 3px;}
.three {margin:0 2px;}
.two {margin:0 1px;}
.one {margin:0 1px;}
.content {padding:5px;background:skyblue;}

See the example.

Description

Here is how it all was created:

• first, we create five blocks with different names to form our corners (name them any way you wish)
• secondly, we wrap all the blocks in a container to limit our "corners" to the width of the content block
• thirdly, we specify margins to our top and bottom divs to form a corner
• lastly, we fill fill the blocks with a background color and provide margin for the content block

Notes

This solution works best in all web standards compliant browsers. IE shows the corners slightly differently (check out how this example looks), so here is an example specifically for IE.

For IE, in addition to height:1px we specify font-size:1px to actually fix the height of our "corners". Also, we adjust the margins of the top two and bottom two blocks in order to display the corners more evenly.

That is, you can put the following code in your IE hacks stylesheet or setup any of the examples on your site (probably the IE one) to be visible in all browsers.

.one, .two, .three, .four, .five {font-size:1px;}
.five {margin:0 6px;}
.four {margin:0 4px;}

Supposedly, one can use the IE version for all browsers to avoid style sheet switching or applying hacks.

As much as the author of this tutorial adores flexible sizes (em, pt, %, etc), using pixels is easier here. Switching to points (pt) will require additional adjustment of the code.

Want rounded borders without a background?

Learn more:

• Adhering to web standards to improve business
• Redesigning a website to increase sales
• How to convert to CSS yourself (Tutorial)
• 3D CSS hover button Tutorial