ASP.NET (35) SQL (25) JAVASCRIPT (24) HTML (14) STYLE SHEET (6) ASP (4) SCRIPT (1)

Search me out HERE!!

How to Get ROUND BOX in Website Designing.

Kindly see the below images. To get the round box you need to CUT box into various pieces as shown in below Image.
HERE I HAVE ALSO SHOWN HOW TO DISPLAY NAME IN BETWEEN. THIS IS OPTIONAL.




Now go with below given code.


CODE:
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="background:url(images/top_left.gif); background-repeat:no-repeat; width:19px; height:37px;"></td>
<td style="background:url(images/top_middle.gif); background-repeat:repeat-x; height:37px;" align="left">
<img align="top" src="images/kapil.gif" border="0" height="37px" />
</td>
<td style="background:url(images/top_right.gif); background-repeat:no-repeat; width:19px; height:37px;"></td>
</tr>

<tr>
<td style="background:url(images/middle_left.gif); background-repeat:repeat-y; width:19px; " ></td>
<td>

<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
THIS IS TEXT AREA
</td>
</tr>
</table>

</td>
<td style="background:url(images/middle_right.gif); background-repeat:repeat-y; width:19px; "></td>
</tr>

<tr>
<td style="background:url(images/bottom_left.gif); background-repeat:no-repeat; width:19px; height:20px;"></td>
<td style="background:url(images/bottom_middle.gif); background-repeat:repeat-x; height:20px;"></td>
<td style="background:url(images/bottom_right.gif); background-repeat:no-repeat; width:19px; height:20px;"></td>
</tr>
</table>


After applying this, you will get below given Output:

No comments:

Post a Comment