Dashed Border Effect With CSS

Submitted by:Jhon Smith

Date added:05 January, 2012

Category:CSS

A simple dashed border effect by CSS

Tags: dashed border effect

Code Snippet:

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/example_border.gif" alt="example image border" width="150" height="86" /></a></p>
 
 

Comments