Rounded corner is one of the hottest topics in today’s web designing. Here you find a nice way of creating different colored rounded div. In my example, I have created one green and one yellow div.
The required css is
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
h4,p{margin: 0 10px}
/*for yellow div*/
div#yellow_div{
margin: 0 5%;
background: #F7FC62;
/*change color here to get a different color div */
}
b.rtop_yellow, b.rbottom_yellow{display:block;background: #FFF}
b.rtop_yellow b, b.rbottom_yellow b{display:block;height: 1px;
overflow: hidden; background: #F7FC62}
/*change color here to get a different colored div */
b.rtop_yellow b.r4, b.rbottom_yellow b.r4{margin: 0 1px;
height: 2px}
/*for green div*/
div# green_div{
margin: 0 5%;
background: #8FFF63;
/*color changed */
}
b.rtop_green, b.rbottom_green{display:block;background: #FFF}
b.rtop_green b, b.rbottom_green b{display:block;height: 1px;
overflow: hidden; background: #8FFF63}
/*color changed */
b.rtop_green b.r4, b.rbottom_green b.r4{margin: 0 1px;
height: 2px}
Now you will find how to use this css to create two colorful div
<div id=" yellow_div " style="width:250px; ">
<b class="rtop_yellow"><b class="r1"></b><b class="r2"></b><b class="r3"></b>
<b class="r4"></b></b>
place your content here<br>
place your content here<br>
place your content here<br>
<b class="rbottom_yellow"><b class="r4"></b><b class="r3"></b><b class="r2">
</b><b class="r1"></b></b>
</div>
<br>
<div id=" green_div " style="width:250px; ">
<b class="rtop_green"><b class="r1"></b><b class="r2"></b><b class="r3">
</b><b class="r4"></b></b>
place your content here<br>
place your content here<br>
place your content here<br>
<b class="rbottom_green"><b class="r4"></b><b class="r3"></b><b class="r2">
</b><b class="r1"></b></b>
</div>
The result will be like this.
You can easily create you own color div just by changing the color in css I mentioned above
and use that name in div id and class attribute of b tag.