Para crear un borde inline(interior) a una imagen con CSS, tendremos que seguir estos pasos:

1. En el código HTML, ponemos este div, llamando al estilo que luego definiremos en CSS:

<div class="imgborde"><a href="#"></a></div>

2. Después, vamos a crear el código CSS al que llama el div:

.imgborde a{width:130px;height:130px;border:0; background-image:url(images/tuimagen.jpg);display:block;}
.imgborde a:hover {border:3px solid #5f9215;
width:124px;height:124px;background-position:center;}

3. Si deseamos hacerlo con otras imágenes, tendremos que insertar esto en el div donde queramos que aparezca la segunda imagen:

<div class="imgborde"
style="background-image:url(images/segunda-imagen.gif);">
<a href="#"></a></div>

4. Y listo, ya tendremos nuestra imagen con borde inline (interior) al pasar el ratón por encima (mouse hover):

Ver ejemplo del resultado final

Compartir/Guardar