16A-Imágenes en los bordes con CSS

---

16A- Imágenes en los bordes con CSS 🖼️

La propiedad border-image te permite usar una imagen como borde de un elemento. Es una propiedad de atajo que combina varias sub-propiedades para controlar el origen, el corte y la repetición de la imagen.

1. Propiedades principales de `border-image`

Para entender cómo funciona, es importante conocer las tres propiedades principales:

border-image-source

Especifica la URL de la imagen que se usará como borde.

border-image-source: url("ruta/a/imagen.png");

border-image-slice

Esta propiedad es fundamental. Divide la imagen en 9 secciones (cuatro esquinas, cuatro bordes y el centro). El valor que le das indica las distancias de los cortes desde los bordes de la imagen. La parte central es opcional y no siempre se usa.

border-image-slice: 30; /* El borde se corta a 30px del borde de la imagen */

border-image-repeat

Controla cómo se repiten los bordes para llenar el espacio. Los valores más comunes son:

• stretch: Estira la imagen para cubrir el espacio.
• repeat: Repite la imagen hasta llenar el espacio.
• round: Repite la imagen, pero la escala para que no queden huecos.

border-image-repeat: repeat;

2. La propiedad de atajo `border-image`

Puedes combinar las tres propiedades en una sola línea para mayor comodidad, siguiendo el orden: `source`, `slice`, `repeat`.

/* La propiedad de atajo combina todo en una línea */
border-image: url("ruta/a/imagen.png") 30 round;

Ejemplos Visuales

Borde estirado: La imagen se estira para llenar el borde.

Este recuadro tiene un borde de imagen estirado.

Borde repetido: La imagen se repite para llenar el borde.

Este recuadro tiene un borde de imagen repetido.

Borde redondeado: La imagen se repite y se ajusta para encajar perfectamente.

Este recuadro tiene un borde de imagen redondeado.

---

Ir al índice