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="#"><img.simple style="border 1px solid green" src="imagen.gif" width="100" height="62" alt="Imagen">
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
