Friday, May 8, 2009

Rounded Corners Using CSS and 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>

1 comment:

e-sign act said...

Grateful to check out your website, I seem to be ahead to more excellent sites and I wish that you wrote more informative post for us. Well done work.