Tengo un problema, y es que al tratar de ponerle borde a una imagen, pareciera que solo cierra una parte de la imagen y no toda, aquí les muestro un pantallazo de lo que me refiero:
El código que estoy utilizando es este. Ojalá me puedan ayudar a resolver el problema:
Código HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{font-family:Arial, Helvetica, sans-serif; font-size:36px; font-weight:bold; color:#666;}
#cuerpo{
width:960px;
padding: 150px 0 0 0;
margin:0 auto;
}
#metrogdl{width:210px; height: 210px; float:left; margin:20px; }
#metrogdl a{width:210px; height: 210px; border:#999 1px solid; padding:10px;-moz-border-radius: 7px; -webkit-border-radius: 7px; }
#metrogdl a:hover{box-shadow: -10px 10px 10px #CCC; -moz-box-shadow:-10px 10px 10px #CCC; -webkit-box-shadow:-10px 10px 10px #CCC; border:#999 2px solid; }
#rescatemos{width:200px; height: 200px; float:left; margin:20px;}
#rescatemos a{width:210px; height: 210px; border:#999 1px solid; padding:10px;-moz-border-radius: 7px; -webkit-border-radius: 7px; }
#rescatemos a:hover{box-shadow: -10px 10px 10px #CCC; -moz-box-shadow:-10px 10px 10px #CCC; -webkit-box-shadow:-10px 10px 10px #CCC; border:#999 2px solid;}
#ciudadarbol{width:200px; height: 200px; float:left; margin:20px;}
#ciudadarbol a{width:210px; height: 210px; border:#999 1px solid; padding:10px;-moz-border-radius: 7px; -webkit-border-radius: 7px; }
#ciudadarbol a:hover{box-shadow: -10px 10px 10px #CCC; -moz-box-shadow:-10px 10px 10px #CCC; -webkit-box-shadow:-10px 10px 10px #CCC; border:#999 2px solid;}
img{border:none;}
</style>
</head>
<body>
<div id="cuerpo">
Elige el sitio al que deseas entrar<br />
<div id="metrogdl">
<a href="http://www.metrogdl.org"><img src="metrogdl.jpg" /></a>
</div>
<div id="rescatemos">
<a href="http://www.metrogdl.org/?page_id=519"><img src="rescatemos.jpg" /></a>
</div>
<div id="ciudadarbol">
<a href="http://www.redarbol.blogspot.com"><img src="redarbol.jpg" /></a>
</div>
</div>
</body>