Eliminar el borde de las imágenes con vínculo

Eliminar el borde de las imágenes con vínculo

vinculo-borde-imagen
Cuando vinculamos una imagen, si no tenemos aplicada la propiedad border: none; alrededor de la imagen podremos identificar un recuadro azul, si usamos Firefox. Como decía anteriormente, con solo aplicar la propiedad anterior con su valor correspondiente esto se arreglará y el borde quedará eliminado. Esto es muy sencillo pero existe gente que tiene el problema, generalmente los que son principiantes.

Por ejemplo, en esta línea:

<a href="www.mienlace.com" title="mienlace"><img src="images/imagen.gif" title="imagen" alt="imagen" /></a>

Si la dejamos como está, nos saldrá el recuadro azul. Si deseamos que desaparezca el recuadro azul en todas las imágenes, nos vamos a nuestro documento CSS y añadimos esta clase:

img {

border: none;

}

Si deseamos eliminar el borde azul únicamente en todas las imágenes que se encuentren enlazadas, sería así:

a img {

border: none;

}

Si solo deseamos eliminar el borde azul en la imagen anterior, utilizamos los estilos en línea:

<a href="www.mienlace.com" title="mienlace"><img src="images/imagen.gif" style="border: none;" title="imagen" alt="imagen" /></a>

Si queremos podemos saber más sobre los bordes en las imágenes.

Autor de CSSBlog ES

Post relacionados


  • angeluxmx
    Pedro

    Muchisimas gracias por el aporte de verdad a sido de muchisima ayuda, me habia pasado toda la tarde tratando de quitar este dichoso borde y no habia podido, de verdad te lo agradezco

    Saludos
  • Muchas gracias, lo pruebo ahora, me estoy pegando con los nuevos menús con imagenes y no me libro del borde.
  • Mar
    Gracias por postear esto. Me habéis salvado la vida con una web en joomla que me estaba tomando el pelo con los dichosos colores en ie6 e ie7.

    gracias, gracias y gracias :)
  • gracias ya corregi ese error sitito
  • Pedro CM
    @José GDF se puede hacer, pero lo correcto es definir el borde mediante CSS.

    Un saludo.
  • Tengo una duda: a veces, en el html, pongo border="0" y parece que funciona, pero ¿es correcto realmente?
  • @FeR exacto, lo mismo digo.
  • Pedro CM
    @FeR lo indicaré en la entrada, la verdad es que si no deseamos que ninguna tenga borde puede ser una buena opción, pero también sería matar moscas a cañonazos si sólo queremos eliminar el borde en las imágenes con vínculos.

    Un saludo.
  • FeR
    ¿No sería más correcto eliminar el borde generado por ser un enlace? Es decir:

    a img {border: none}

    Porque si le quitas todos los bordes a las imágenes... No siempre quieres eso, vamos. Puedes hacerlo y no pasa nada, pero sería mejor sólo quitar el efecto de las imágenes con link y no de todas. Al menos eso creo. :D
  • Pedro CM
    @Marcial mira este script para blogger que te permitirá citar y responder comentarios:

    http://userscripts.org/scripts/show/7667

    Un saludo.
  • Marcial
    Perdone, ¿sabría decirme cómo puedo instalar en blogger el truco que usted tiene en el blog que permite "responder" a un comentario? En cada comentario aparece un botón que dice responder y que al hacer clic, el nombre aparece en el cuadro de texto.

    Querría ponerlo en mi blog. Le estaré muy agradecido.

    Cordiales saludos.

Get Adobe Flash playerPlugin by wpburn.com wordpress themes