View Full Version : Making Rounded Borders!


Lennac
07-10-2003, 02:39 AM
How do I get rid of those ugly boxy looking borders and replace them with those nice rounded ones I see on other peoples websites.

I know I have to actually make the image but is the code that I have to put in to make it work?:)

Alcy
07-10-2003, 05:39 AM
<table border="0" cellpadding="0" cellspacing="0" width="#" height="#">

<tr>
<td width="#" height="#"><img src="TOPRIGHT.GIF"></td>
<td width="#" height="#"><img src="TOPSIDE.GIF"></td>
<td width="#" height="#"><img src="TOPLEFT.GIF"></td>
</tr>

<tr>
<td width="#" height="#"><img src="LEFT SIDE.GIF"></td>
<td width="#" height="#" valign="top">
TEXT TEXT TEXT
</td>
<td width="#" height="#"><img src="RIGHTSIDE.GIF"></td>
</tr>

<tr>
<td width="#" height="#"><img src="BOTTOMRIGHT.GIF"></td>
<td width="#" height="#"><img src="BOTTOMSIDE.GIF"></td>
<td width="#" height="#"><img src="BOTTOMLEFT.GIF"></td>
</tr>

</table>

That'll create a table that can't be made any larger - because the images will create a border that will limit the size of the table . You want to make sure that the corner images are all the same size, and that the width of the left/right sides are the same, and the height of the top/bottom sides are the same.

If you want the table to get larger as you enter text, set the side images as the background of those cells (ie. across: top/bottom, down: left/right). Also, you might want to set the backgrounds to only tile down one way.

pb&j
07-10-2003, 06:37 AM
or...
for fun try this...

<fieldset>
some stuff here
</fieldset>

Lennac
07-10-2003, 12:05 PM
Thanx Alcy, I'll do that.

pb&j... not sure what fieldsets are... so it might help if I understood them:p

pb&j
07-10-2003, 02:02 PM
fieldset = kinda like a table. not images mind you, still a grey border. the border may be changed using css just like any other object.

**edit**
darn. sorry bout that. for some reason i was thinking that this would have rounded corners, but it doesn't. oh well, the tabled image version is still around.
**edit**