Cómo poner borde a una imagen en HTML con CSS

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.

Si te sirvió, ¡compártelo!

También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público.


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.