Hoy vamos a aprender cómo agregar un borde alrededor de una imagen usando CSS. Será posible definir el color y el ancho del borde. Así que sigue leyendo para darle estilo de marco a las imágenes con CSS.
Agregar borde con CSS directamente en la etiqueta HTML
Una opción rápida para agregar un borde a una imagen específca es hacerlo con CSS directamente en la etiqueta de HTML. A esto lo llamamos inline CSS, o CSS incrustado o en línea. Para ello, debemos usar el atributo style, donde podemos colocar los estilos de CSS necesarios.
Para agregar borde a una imagen debemos usar la propiedad border en CSS. Esta propiedad realmente engloba 3 propiedades, en el siguiente orden:
- border-width: El ancho del borde. Se puede especificar en pixeles, por ejemplo: 1px.
- border-style: El tipo de borde. Puede ser solid, dashed, dotted, etc.
- border-color: El color del borde. Se puede especificar como el nombre del color, en RGB o HEX.
Entonces, si queremos agregar un borde negro sólido de 1px, lo hacemos así:
<img src="imagen.jpg" style="border: 1px solid #000;">
Agregar borde a todas las imágenes
Además, es posible usar CSS en un archivo aparte o en el head de la página HTML. Esto permite que los estilos se apliquen a más de un elemento, no solo una imagen, como en el apartado anterior.
La parte de HTML sería así, sin necesidad de usar el atributo style en cada imagen.
<img src="imagen.jpg" alt="Imagen"> <img src="imagen-2.jpg" alt="Imagen 2">
Entonces, para poner borde a todas las imágenes, debemos aplicar el estilo a todos los elementos img. El CSS para agregar un borde negro sólido de 1px quedaría así:
img{
border: 1px solid #000;
}De esta forma, usando el mismo CSS explicado anteriormente, hemos aplicado un borde a todas las imágenes.
Agregar borde solo a algunas imágenes
Por otro lado, si solo deseas agregar el borde a algunas imágenes, te recomiendo que utilices las clases. Vamos a agregar la clase conborde a las imágenes que queremos. Puedes nombrar la clase como tu desees. El HTML quedaría así:
<img src="imagen.jpg" alt="Imagen" class="conborde"> <img src="imagen-2.jpg" alt="Imagen 2">
Y entonces, el CSS solo aplicaría a esa clase:
.conborde{
border: 1px solid #000;
}Y de esta forma, solo los elementos que tengan la clase conborde van a tener el borde de 1px de color negro.
Agregar bordes de colores y tipos a las imágenes
Ahora que sabemos cómo agregar un borde simple a nuestra imágenes, podemos seguir probando con diferentes colores y tipos de borde.
Borde punteado de color verde alrededor de una imagen
.conborde{
border: 5px dotted green;
}
Borde discontinuo de color azul alrededor de una imagen
.conborde{
border: 3px dashed blue;
}Borde sólido de color rojo alrededor de una imagen
.conborde{
border: 5px solid red;
}¡Eso es todo! Te recomendamos seguir jugando con los estilos de borde en imágenes. Puedes usar editores online de HTML y CSS para ir probando. Cuéntanos en los comentarios si tienes alguna duda.
