CSS Border

Change border onmouseover

Pass your mouseover the image.

.borderover{
border:4px inset #FF0000;
width:100px;
height:100px;
}

.borderout{
border:4px outset #AA0000;
width:100px;
height:100px;
}

Creating an effect like the following is done simply by nesting one div inside another.

The parent div is given

Width and height
A background using the border image
Top and bottom padding the height of the image
Left and right padding the width of the image

The nested div is given

Width and Height of 100%
Background color

#bordered{
background-image:url(ball2.gif);
padding:8px;
width:296px;
height:200px;
}

#content{
width:100%;
height:100%;
background-color: #ffffff;
}

<DIV id="bordered">

<DIV id="content">

</DIV>

</DIV>

In order to get an even border you have to make sure that the dimensions are correct for the size of the image used.
The width of the parent div must divide equally with the image width and the height of the parent div must divide equally with the image height. Therefore if the image width is 10 pixels then the parent width must divide equally by 10.

Example:
Image width = 8, parent width = 290
290 / 8 = 36.25 , must result in a whole number, therefore,
37 * 8 = 296 , change the width to 296
or
36 * 8 = 288 , change the width to 288

Or you could knock up a quick script to do the calculations for you Get Size