ejemploborde

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:
  2. <div class="imgborde"><a href="#"></a></div>
  3. Después, vamos a crear el código CSS al que llama el div:
  4. .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;}
  5. Si deseamos hacerlo con otras imágenes, tendremos que insertar esto en el div donde queramos que aparezca la segunda imagen:
  6. <div class="imgborde" 
    style="background-image:url(images/segunda-imagen.gif);">
    <a href="#"></a></div>
  7. Y listo, ya tendremos nuestra imagen con borde inline (interior) al pasar el ratón por encima (mouse hover):

Ver ejemplo del resultado final