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}
.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>
<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