La Propiedad BORDER-IMAGE

La propiedad border-image en CSS te permite utilizar una imagen como borde alrededor de un elemento HTML.

La propiedad border-image en CSS te permite utilizar una imagen como borde alrededor de un elemento HTML. Es una forma poderosa de crear bordes visualmente atractivos y personalizados que van más allá de los simples colores y estilos de línea.

Sintaxis Básica

La propiedad border-image es una propiedad abreviada (shorthand) que combina varias propiedades individuales en una sola declaración. La sintaxis general es la siguiente:

CSS
 
selector {
  border-image: <source> <slice> [ / <width> ]? [ / <outset> ]? [ <repeat> ]?;
}

Aunque parece compleja, vamos a desglosarla en sus componentes individuales para entenderla mejor.

Propiedades Individuales que Controla border-image

La propiedad border-image controla las siguientes propiedades individuales:

  1. border-image-source: Especifica la ruta a la imagen que se utilizará como borde.
  2. border-image-slice: Define cómo se divide la imagen de origen en nueve regiones: cuatro esquinas, cuatro bordes y una región central.
  3. border-image-width: Especifica el ancho de la imagen del borde.
  4. border-image-outset: Especifica cuánto se extiende la imagen del borde más allá del borde del elemento.
  5. border-image-repeat: Define cómo se deben repetir o estirar las regiones del borde de la imagen para que coincidan con las dimensiones del elemento.

Vamos a explorar cada una de estas propiedades en detalle.

1. border-image-source

Esta propiedad especifica la ruta a la imagen que se utilizará como borde. Puedes usar una URL para referenciar la imagen.

CSS
 
.elemento {
  border-image-source: url("ruta/a/tu/imagen.png");
}

2. border-image-slice

Esta propiedad divide la imagen de origen en nueve regiones utilizando cuatro valores que representan los desplazamientos desde los bordes superior, derecho, inferior e izquierdo de la imagen.

CSS
 
.elemento {
  border-image-slice: <top> <right> <bottom> <left> fill?;
}
  • Puedes especificar de uno a cuatro valores:
    • Un valor: Se aplica a los cuatro lados.
    • Dos valores: El primero se aplica a los bordes superior e inferior, el segundo a los bordes derecho e izquierdo.
    • Tres valores: El primero se aplica al borde superior, el segundo a los bordes derecho e izquierdo, el tercero al borde inferior.
    • Cuatro valores: Se aplican en el orden: superior, derecho, inferior, izquierdo.
  • Los valores pueden ser números (que corresponden a píxeles en la imagen) o porcentajes (relativos al tamaño de la imagen).
  • La palabra clave opcional fill indica que la región central de la imagen también debe usarse como fondo del elemento.

Ejemplos:

  • border-image-slice: 30; (Corta 30 píxeles desde cada borde)
  • border-image-slice: 30 40; (Corta 30px arriba y abajo, 40px a la derecha e izquierda)
  • border-image-slice: 10 20 30; (Corta 10px arriba, 20px derecha e izquierda, 30px abajo)
  • border-image-slice: 10 20 30 40; (Corta 10px arriba, 20px derecha, 30px abajo, 40px izquierda)
  • border-image-slice: 30 fill; (Corta 30px de cada borde y usa el centro como fondo)

3. border-image-width

Esta propiedad especifica el ancho de la imagen del borde. Puedes usar valores de longitud (como px, em, rem), porcentajes (relativos al ancho del borde del elemento) o la palabra clave auto (que utiliza el ancho de la imagen de origen).

CSS
 
.elemento {
  border-image-width: <ancho>;
}

Puedes especificar de uno a cuatro valores, siguiendo la misma lógica que border-image-slice (arriba, derecha, abajo, izquierda).

Ejemplos:

  • border-image-width: 15px; (Ancho de 15 píxeles en todos los bordes)
  • border-image-width: 20px 30px; (Ancho de 20px arriba y abajo, 30px a la derecha e izquierda)
  • border-image-width: auto; (Utiliza el ancho de la imagen de origen)
  • border-image-width: 10% 5%; (Ancho del 10% del ancho del borde arriba y abajo, 5% a la derecha e izquierda)

4. border-image-outset

Esta propiedad especifica cuánto se extiende la imagen del borde más allá del borde del elemento. Puedes usar valores de longitud o la palabra clave auto (que hace que el valor sea igual al border-image-width).

CSS
 
.elemento {
  border-image-outset: <desplazamiento>;
}

Puedes especificar de uno a cuatro valores, siguiendo la misma lógica que border-image-slice y border-image-width.

Ejemplos:

  • border-image-outset: 10px; (Extiende 10 píxeles en todos los lados)
  • border-image-outset: 5px 10px; (Extiende 5px arriba y abajo, 10px a la derecha e izquierda)
  • border-image-outset: auto; (El valor es el mismo que border-image-width)

5. border-image-repeat

Esta propiedad define cómo se deben repetir o estirar las regiones del borde de la imagen (los bordes superior, derecho, inferior e izquierdo) para que coincidan con las dimensiones del elemento.

CSS
 
.elemento {
  border-image-repeat: <repeat-x> <repeat-y>?;
}
  • Puedes especificar uno o dos valores:
    • Un valor: Se aplica tanto a la repetición horizontal como a la vertical.
    • Dos valores: El primero se aplica a la repetición horizontal, el segundo a la vertical.
  • Los valores posibles son:
    • stretch: La imagen del borde se estira para llenar el espacio.
    • repeat: La imagen del borde se repite para llenar el espacio. Puede que se corten las imágenes si no encajan exactamente.
    • round: La imagen del borde se repite para llenar el espacio. Si no encaja exactamente, se ajusta la escala de las imágenes para que no haya cortes.
    • space: La imagen del borde se repite para llenar el espacio. Si no encaja exactamente, se añade espacio entre las imágenes.

Ejemplos:

  • border-image-repeat: stretch; (Estira la imagen del borde en ambas direcciones)
  • border-image-repeat: repeat; (Repite la imagen del borde en ambas direcciones)
  • border-image-repeat: round; (Repite y ajusta la escala si es necesario)
  • border-image-repeat: space; (Repite y añade espacio si es necesario)
  • border-image-repeat: repeat stretch; (Repite horizontalmente, estira verticalmente)

Usando la Propiedad Abreviada border-image

Ahora que entendemos las propiedades individuales, podemos volver a la propiedad abreviada border-image. Aquí tienes algunos ejemplos de cómo combinar los valores:

CSS
 
.elemento-ejemplo1 {
  border-image: url("border.png") 30 / 15px / 10px round;
  border-width: 15px; /* Asegúrate de definir un ancho de borde */
}

.elemento-ejemplo2 {
  border-image: url("fancy-border.png") 20% / auto / 5px repeat stretch;
  border-width: 20px;
}

.elemento-ejemplo3 {
  border-image: url("pattern.svg") 10 20 10 20 fill / 10px 20px / 5px 10px space round;
  border-width: 10px 20px;
}

Orden de los valores en la propiedad abreviada:

  1. <border-image-source>
  2. <border-image-slice>
  3. Opcionalmente, / seguido de <border-image-width>
  4. Opcionalmente, otro / seguido de <border-image-outset>
  5. Opcionalmente, <border-image-repeat>

¡Importante! Debes definir un border-width para que la imagen del borde sea visible. El ancho del borde del elemento actuará como el "marco" donde se mostrará la imagen.

Ejemplo Práctico Completo

Vamos a crear un ejemplo con una imagen de borde simple:

HTML:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor {
    display: flex;
    gap: 20px;
  }

  .elemento {
    width: 200px;
    height: 150px;
    padding: 20px;
    font-family: sans-serif;
    text-align: center;
  }

  .borde-imagen-1 {
    border-image-source: url("https://mdn.mozillademos.org/files/10442/border-image.png");
    border-image-slice: 27;
    border-image-width: 27px;
    border-image-repeat: round;
    border-width: 27px;
  }

  .borde-imagen-2 {
    border-image: url("https://mdn.mozillademos.org/files/10442/border-image.png") 27 / 15px / 10px stretch;
    border-width: 15px;
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="elemento borde-imagen-1">Borde con Repetición 'round'</div>
    <div class="elemento borde-imagen-2">Borde con Repetición 'stretch'</div>
  </div>

</body>
</html>

En este ejemplo, estamos utilizando una imagen proporcionada por Mozilla Developer Network. El primer elemento utiliza la repetición round, que ajusta la escala de las imágenes para evitar cortes. El segundo elemento utiliza la repetición stretch, que simplemente estira la imagen para llenar el espacio.

Casos de Uso Comunes

  • Marcos decorativos: Crear marcos visualmente atractivos alrededor de imágenes o secciones de contenido.
  • Bordes de botones únicos: Diseñar botones con bordes personalizados que coincidan con la estética del sitio.
  • Elementos de interfaz de usuario estilizados: Aplicar bordes de imagen a menús, paneles y otros componentes de la interfaz.

Compatibilidad del Navegador

La propiedad border-image tiene buena compatibilidad con los navegadores modernos. Sin embargo, puede haber algunas diferencias en la implementación o soporte en versiones más antiguas. Es recomendable probar en diferentes navegadores para asegurar la consistencia visual.

Consideraciones

  • Tamaño y resolución de la imagen: Utiliza imágenes con el tamaño y la resolución adecuados para evitar problemas de escalado o rendimiento.
  • Rendimiento: Imágenes de borde muy grandes pueden afectar el rendimiento de la página.
  • Fallback: Considera proporcionar un estilo de borde tradicional (con border-style, border-width y border-color) como fallback para navegadores que no admiten border-image.

Conclusión

La propiedad border-image ofrece una gran flexibilidad para crear bordes personalizados y visualmente ricos en tus diseños web. Aunque la sintaxis puede parecer intimidante al principio, entender sus componentes individuales te permitirá aprovechar al máximo esta poderosa característica de CSS. ¡Experimenta con diferentes imágenes, valores de corte y repetición para descubrir las infinitas posibilidades creativas que ofrece!