Tuesday, 5 June 2012

Rounded Corners Using CSS without Images


We can easily create Rounded Corners in the html Page with CSS, there is no need of images.
Just Copy and Paste the below CSS (Cascade Style Sheet) and Html in Page.

CSS: .b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#0384ab; margin:0 5px;}
.b2f {height:1px; background:#0384ab; margin:0 3px;}
.b3f {height:1px; background:#0384ab; margin:0 2px;}
.b4f {height:2px; background:#0384ab; margin:0 1px;}
.contentf {background: #0384ab;width:100%}
.contentf div{margin-left: 5px;}
.itemCss{float:left;width:400px;padding:5px;color:#ffffff}
 
 
HTML: <div style="width:400px;">
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
<div class="itemCss">
This is the test message to understand how Rounded Corners obtained only with CSS.
There is no need of images to get Rounded Corners.
</div>
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
</div>

No comments:

Post a Comment