Create Rounded corners by CSS without image which supports in all Browsers

In this tutorial i will show you how to Create rounded corners by css without image which supports in all Browsers. I use this technique in my professional work and the output is outstanding. Just you need to edit the css file to make different color rounded box. No image editing sofware needed to create curve image. All you just need to do is understanding the css code. Analyze whole css carefully and see which class use for when and where.

If you are beginner level in css and html i suggest you just copy and paste my css and html code and study the code. Its not too hard.
Hope you will enjoy it. If you like this technique just let me know i will show more excellent tricks in my next post.

Basic idea :
The basic idea of this rounded corners without image is that we style the corners using four or five pixel high strips before and after the main content div. These strips are created using styled <b></b> tags. <b> tags have been used because they are faster to type than <span></span> and take up less file space (as good a reason as any).

Each strip is created using a background color, a left and right border color and a left and right margin.

Heare is a diagram to show how each strip was organized.

The basic curved corner is comprised of four strips labelled b1 to b4 and in the example above the background color is a Orchid , the border color is white and the outer background color is light grey.

The XHTML is below:

<div class="inset">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Create rounded corners by css without image which support in all Browsers.</h1>
<p>Rounded corners with inset borders</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>

The css style is below:

.inset {
background:transparent;
width:40%;
}
.inset h1, .inset p {
margin:0 10px;
}
.inset h1 {
font-size:2em; color:#fff;
}
.inset p {
padding-bottom:0.5em;
}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {
display:block;
overflow:hidden;
font-size:1px;
}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {
height:1px;
}
.inset .b2 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #aaa;
}
.inset .b3 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #ddd;
}
.inset .b4 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #eee;
}
.inset .b4b {
background:#ccc;
border-left:1px solid #aaa;
border-right:1px solid #fff;
}
.inset .b3b {
background:#ccc;
border-left:1px solid #ddd;
border-right:1px solid #fff;
}
.inset .b2b {
background:#ccc;
border-left:1px solid #eee;
border-right:1px solid #fff;
}
.inset .b1 {
margin:0 5px;
background:#999;
}
.inset .b2, .inset .b2b {
margin:0 3px;
border-width:0 2px;
}
.inset .b3, .inset .b3b {
margin:0 2px;
}
.inset .b4, .inset .b4b {
height:2px; margin:0 1px;
}
.inset .b1b {
margin:0 5px;
background:#fff;
}
.inset .boxcontent {
display:block;
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #fff;
}

After applying above code the box will be shows like following image

Thats it. Take the code and customize as you want. If you have any question just ask. I will try to give you a better solution. Enjoy making rounded corners by css without image.