CSS tutorial, Advanced rounded corner with only css. I got so many scripts which had solution with javascripts and some are given solutions with images.

In one of my project I got requirement about half rounded corner in header and footer.

Advanced rounded corner with only css

But I want customize every thing like color of rounded corner header background, footer background and border also.

I did so much R&D about same but did not found any solution.

So I tried to code myself in CSS and I got succeed in that.
In this article I am going to share the code with you.

first put my style sheet in your webpage.

<style type="text/css">
body {background-color: #fff;font: normal 10pt ,Arial,sans-serif;}

img{border:none;}

.wordpressapi-main{
 clear:both;
 float:left;
 width:300px;
 /*border:1px solid #f00;*/
}

.wordpressapi_round_header {
 background-color: #ddd;

 -moz-border-radius: 15px 15px 0px 0px;
 -webkit-border-radius: 15px 15px 0px 0px;
 border-radius: 15px 15px 0px 0px;
 /*behavior: url(border-radius.htc);*/
 text-align:center;
 padding:5px 0px 5px 0px;
 clear:both;
 float:left;
}

.wordpressapi_round_footer {
 background-color: #ddd;

 -moz-border-radius: 0px 0px 15px 15px;
 -webkit-border-radius: 0px 0px 15px 15px;
 border-radius: 0px 0px 15px 15px;

 /*behavior: url(border-radius.htc);*/
 text-align:right;

 clear:both;
 float:left;

}
.wordpressapi_round_middle {
 text-align:center;
 color:blue;
 clear:both;
 float:left;
}
.inner_ad {
 padding:10px;
 text-align:left;
 color:black;
 font-size:12px;
 vertical-align: middle;

}
.round_heading{
font-size:16px;
line-height:26px;
font-weight:bold;

}

/* rounded corners */
.wordpressapi-blue-round-container{ /*margin-top:10px;*/}
.wordpressapi-blue-round-container-top, .wordpressapi-blue-round-container-bot, .wordpressapi-acco-top, .wordpressapi-acco-bot {
 display:block;
 background:#fff;
 font-size:1px;
 clear:both;

}
.blue-round-t1, .blue-round-t2, .blue-round-t3, .blue-round-t4 {display:block; overflow:hidden;}
.blue-round-t1, .blue-round-t2, .blue-round-t3 {height:1px;}
.blue-round-t2, .blue-round-t3, .blue-round-t4 {
 background:#0000FF;
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
}
.blue-round-t1 {
 margin:0 5px;
 background:#0000FF;
 border-top:1px solid #ccc;
 height:0px;
}
.blue-round-t2 {margin:0 3px; border-width:0 2px;}
.blue-round-t3 {margin:0 2px;}
.blue-round-t4 {height:2px; margin:0 1px;}

.white-round-t1, .white-round-t2, .white-round-t3, .white-round-t4 {display:block; overflow:hidden;}
.white-round-t1, .white-round-t2, .white-round-t3 {height:1px;}
.white-round-t2, .white-round-t3, .white-round-t4 {
 background:#FFF;
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
}
.white-round-t1 {
 margin:0 5px;
 background:#FFF;
 border-top:1px solid #ccc;
 height:0px;
}
.white-round-t2 {margin:0 3px; border-width:0 2px;}
.white-round-t3 {margin:0 2px;}
.white-round-t4 {height:2px; margin:0 1px;}

.wordpressapi-blue-round-contents{
 display:block;
 border:1px solid #000;
 border-width:0 1px;
 padding: 0 15px;
 background:#0000FF;
 color:#000;
 text-align:justify;
 width: 878px;
 clear:both;
 float:left;

}

.hold{
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
 clear:both;
 float:left;
 width:298px;
}

.inner-adds-bottom{
 padding-top:1px;
 clear:both;
 float:left;
}

/* rounded corners */

.cross-img, .cross-img:link, .cross-img:hover{
 background:url(close_button.gif) no-repeat center;
 width:12px;
 height:12px;
 display:inline-block;
}

.info-img, .info-img:link, .info-img:hover{
 background:url(information_btn.gif) no-repeat center;
 width:12px;
 height:12px;
 display:inline-block;
}
</style>

Then Put following code in your HTML body.

You will get the following result as follows:

Download the main html file from  here: Advanced rounded corner with CSS