Borde interno con CSS

[Ver Ejemplo 2][3]{.verejemplo}

Bueno, aqui les tengo una solución más elegante al tema. Simplemente, en vez de que el border me sume pixeles a la caja que contiene la imagen, es mejor que las haga parte, integrando el border dentro de la imagen. La única contra que veo es que puede que tape algo importante que tenga la imagen, pero bueno depende de su criterio como diseñador/desarrollador aplicarlo.

El HTML del ejemplo es demasiado simple:

<a href="#"><img src="foto.jpg"  /></a>

y con el CSS haremos magia:

a  {<br />
     display: block;<br />
     overflow: hidden;<br />
     position: relative;<br />
     width: 300px;<br />
     height: 200px; <br />
  }<br />
          a img {<br />
               display: block;<br />
          }<br />
          a:hover  {<br />
               border: 5px solid red;<br />
               width: 290px;<br />
               height: 190px; <br />
          }<br />
               a:hover img {<br />
                    margin: -5px 0 0 -5px;<br />
               }

Al link le decimos que sea un elemento bloque (display: block;) y que tenga alto y anchos de la imagen (si no fuera block no lo aplicaría). Luego, al a:hover le definimos el borde que queremos, así como el nuevo ancho y alto restados el borde multiplicado por 2. Me explico. Si tenemos un border: 10px; tenemos que restar 20px al alto y ancho ya que lo cubre por completo, según el [modelo de caja][1]. Finalmente, el truco final. Al a:hover img le decimos que la imagen el momento de poner el mouse sobre el link se va a mover 5px negativos arriba y 5px negativos hacia la izquierda. Con esto logramos que la imagen no se note el movimiento con el :hover y vuelva a su posición inicial. Si su borde es de 10px, sería margin: -10px 0 0 -10px;

[Ver Ejemplo Final][4]{.verejemplo}