Algunas veces las imágenes con enlace quedan un pequeño borde, explicaremos cómo deshacernos de él o implementarlo de otras maneras.

Para hacerlo tendremos que aplicar esto en nuestro código CSS:

a img { border:none }

Si deseamos que todas las imágenes tengan 1 pixel de borde verde, en vez de lo anterior, indicamos:

img { border:1px solid green}

También podemos aplicarlo a una imagen simple, sería así:

<a href="#">

Hay distintos tipos de bordes para aplicar a nuestros elementos:

  • none
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

Si deseamos aplicar un margen a la derecha de nuestra imagen de 3 píxeles, por ejemplo, debería quedar así:

img {
margin-right: 3px;
border: 1px dashed blue; }

En otra entrada para usuarios más avanzados vimos cómo crear efecto de doble borde usando CSS.

¡Eso es todo amigos!

Vía | Pmob