Place black lines around rollover images

[frog]

I have a navigation bar with rollovers and at the moment the rollovers butt against each other. It would be nice if the rollovers were seperated by a thin black line. How do I do this?
HTML thus:

<table border='0' cellpadding='0' cellspacing='0' id='2' style='position:absolute; top:128px; left: 50px; width: 143px;background-color: #CCCCCC'>
<tr>
<td style='height:10px; background-color: #C0C0C0'>&nbsp;</td>
</tr>
<tr>
<td style='height:10px'>&nbsp;</td>
</tr>
<tr>
<td align='center' style='display: block'>
<a href='default.php' onMouseOver=\"WM_imageSwap('home', 'images/homeroll.gif')\"; onMouseOut=\"WM_imageSwap('home', 'images/home.gif')\";><img name='home' src='images/home.gif' border='0'></a></td>
</tr>
<tr>

<td align='center' style='display: block'>
<a href='resume.php' onMouseOver=\"WM_imageSwap('resume', 'images/resumeroll.gif')\"; onMouseOut=\"WM_imageSwap('resume', 'images/resume.gif')\";><img name='resume' src='images/resume.gif' border='0'></a></td>
</tr>
<tr>
<td style='height:692px'>&nbsp;</td>
</tr>
<tr>
<td style='height: 10px; background-color: #C0C0C0'>&nbsp;</td>
</tr>
</table>

[leatherback]

Use stylesheets / CSS:

In your header:

<style type="text/css">

.bordered
{
border-width: 1pt 1.5pt 1.5pt 1pt;
border-color: #000000;
}

</style>

Then in your code, instead of

<img src="">
use:
<img class="bordered" src="">

Read more in http://www.w3.org/TR/REC-CSS2/

J.

[frog]

Happyness is a state of mind. Change your mind and be happy!

Thankyou, you have changed my mind to happy

[leatherback]

😃