Dashed Border Effect

Hover over the image to see the dashed border effect

example image border

This is a very simple dashed border effect that is created by applying a background color to the anchor that holds the image so that the gaps in between the dashed border show as a double color through the dashed borders gaps.

On hover the border is just changed for another colour.

I have also adding padding to the image itself for another effect and then changed the images background color on hover also. Note that ie5.+ don't support padding on images.

Code:

p#dots {
float:left;
margin-top:20px;
margin-left:20px;
}
#dots a {
background-color:blue;
display:block;
border:2px dashed red;
}
#dots a:hover {border:2px dashed #cfc;}
#dots img {display:block;border:none;background:#ffc;padding:4px;}

#dots a:hover img{background:#7eddff}

Html:

<p id="dots"><a href="#"><img src="images/screenanother3col.gif" alt="example image border" width="150" height="86" /></a></p>

Note: Doesn't work in ie5