rounded corner with css

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

CSS tutorial, how to create rounded corners using css. We always need the rounded corners for our various web projects. W3C has offered borders in CSS3.

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function.

how to create rounded corners using css

There are many javascripts are available to create the rounded corner using scripts. But specially recommend use pur css to avoid unnecessary script loading. So many sites uses the background image also, We need to avoid that also.

Following css will give you the rounded corners using only css:

.main_container {background:#ccc; color:#fff; margin:0 15px;}
.wordpressapitop, .wordpressapibottom{
display:block;
background:#fff;
}
.wordpressapitop *, .wordpressapibottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.wordpressapi1{margin: 0 5px}
.wordpressapi2{margin: 0 3px}
.wordpressapi3{margin: 0 2px}
.wordpressapi4{
margin: 0 1px;
height: 2px
}

Use following code in your html file and you are able to use rounded corners without using the javascript

Above script will work on all browsers FF, Chrome, Safari, IE6, IE7, IE8.

Advanced rounded corner with only css

Share Article:

how to create rounded corners using css

Share Article: