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
