La Propiedad BORDER-IMAGE-SLICE

Su función principal es dividir la imagen de origen en nueve regiones: cuatro esquinas, cuatro bordes (superior, derecho, inferior, izquierdo) y una región central.

La propiedad border-image-slice en CSS es fundamental cuando utilizas una imagen como borde con la propiedad border-image. Su función principal es dividir la imagen de origen en nueve regiones: cuatro esquinas, cuatro bordes (superior, derecho, inferior, izquierdo) y una región central. Estas regiones se utilizan luego para formar el borde alrededor del elemento.

Sintaxis Básica

La sintaxis básica para usar la propiedad border-image-slice es la siguiente:

CSS 

selector {
  border-image-slice: <valor>;
}

Donde <valor> puede ser uno, dos, tres o cuatro valores, seguidos opcionalmente de la palabra clave fill.

Las Nueve Regiones

Imagina tu imagen de borde como una cuadrícula de 3x3. La propiedad border-image-slice define las líneas de corte que separan estas nueve regiones:

    top-left | top-edge | top-right
    ---------+----------+----------
    left-edge|  center  | right-edge
    ---------+----------+----------
  bottom-left|bottom-edge|bottom-right

Los valores que proporcionas a border-image-slice determinan el tamaño de estas secciones desde los bordes de la imagen.

Valores de la Propiedad `border-image-slice`

Puedes especificar de uno a cuatro valores para definir los cortes, y opcionalmente la palabra clave fill:

Un valor: Este valor se aplica a los cuatro lados (superior, derecho, inferior, izquierdo). Indica cuánto se "corta" desde cada borde de la imagen para definir las regiones de las esquinas y los bordes.

CSS 

.un-valor {
  border-image-source: url("border.png"); /* Reemplaza con tu imagen */
  border-image-slice: 30; /* Corta 30px desde cada borde */
  border-image-width: 30px; /* El ancho del borde debe coincidir o ser menor */
  border-style: solid; /* Necesitas un estilo de borde */
}

Dos valores: El primer valor define los cortes superior e inferior, y el segundo valor define los cortes derecho e izquierdo.

CSS 

.dos-valores {
  border-image-source: url("border.png");
  border-image-slice: 20 40; /* Corta 20px arriba y abajo, 40px derecha e izquierda */
  border-image-width: 40px;
  border-style: solid;
}

Tres valores: El primer valor define el corte superior, el segundo define los cortes derecho e izquierdo, y el tercero define el corte inferior.

CSS 

.tres-valores {
  border-image-source: url("border.png");
  border-image-slice: 10 30 20; /* Corta 10px arriba, 30px derecha e izquierda, 20px abajo */
  border-image-width: 30px;
  border-style: solid;
}

Cuatro valores: Los valores se aplican en el orden: superior, derecho, inferior, izquierdo.

CSS 

.cuatro-valores {
  border-image-source: url("border.png");
  border-image-slice: 10 20 30 40; /* Corta 10px arriba, 20px derecha, 30px abajo, 40px izquierda */
  border-image-width: 40px;
  border-style: solid;
}

Unidades: Los valores pueden ser:

Números: Representan píxeles en la imagen.
Porcentajes (%): Son relativos al tamaño de la imagen.

CSS 

.porcentaje {
  border-image-source: url("border.png");
  border-image-slice: 10% 20%; /* Corta el 10% arriba y abajo, 20% derecha e izquierda */
  border-image-width: 20%;
  border-style: solid;
}

La palabra clave fill (opcional): Si se incluye la palabra clave fill después de los valores de corte, la región central de la imagen también se utilizará como fondo del elemento.

CSS 

.con-fill {
  border-image-source: url("pattern.png");
  border-image-slice: 30 fill; /* Corta 30px de cada borde y usa el centro como fondo */
  border-image-width: 30px;
  border-style: solid;
  padding: 20px; /* Para ver el fondo */
}

Cómo se Utilizan las Regiones

Una vez que la imagen se ha dividido, las nueve regiones se utilizan de la siguiente manera para formar el borde alrededor del elemento:

Esquinas: Las cuatro regiones de las esquinas de la imagen se colocan en las esquinas del elemento.
Bordes: Las regiones de los bordes superior e inferior se repiten o estiran (según la propiedad border-image-repeat) horizontalmente para llenar el espacio entre las esquinas. De manera similar, las regiones de los bordes izquierdo y derecho se repiten o estiran verticalmente.
Centro: Si se usa la palabra clave fill, la región central de la imagen se utiliza como fondo del elemento.

Ejemplo Práctico Completo

Vamos a crear un ejemplo con una imagen de borde y diferentes valores de border-image-slice:

HTML:

HTML 

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

  .elemento {
    width: 150px;
    height: 100px;
    padding: 15px;
    font-family: sans-serif;
    text-align: center;
    border-style: solid; /* Necesario para border-image */
    border-width: 30px; /* Ancho del borde */
    box-sizing: border-box; /* Para que el padding no afecte el tamaño */
  }

  .slice-30 {
    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;
  }

  .slice-20-40 {
    border-image-source: url("https://mdn.mozillademos.org/files/10442/border-image.png");
    border-image-slice: 20 40;
    border-image-width: 40px;
    border-image-repeat: repeat;
  }

  .slice-10-30-20 {
    border-image-source: url("https://mdn.mozillademos.org/files/10442/border-image.png");
    border-image-slice: 10 30 20;
    border-image-width: 30px;
    border-image-repeat: stretch;
  }

  .slice-10-20-30-40 {
    border-image-source: url("https://mdn.mozillademos.org/files/10442/border-image.png");
    border-image-slice: 10 20 30 40;
    border-image-width: 40px;
    border-image-repeat: space;
  }

  .slice-30-fill {
    border-image-source: url("https://mdn.mozillademos.org/files/10442/border-image-pattern.png");
    border-image-slice: 30 fill;
    border-image-width: 30px;
    border-image-repeat: repeat;
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="elemento slice-30">slice: 30</div>
    <div class="elemento slice-20-40">slice: 20 40</div>
    <div class="elemento slice-10-30-20">slice: 10 30 20</div>
    <div class="elemento slice-10-20-30-40">slice: 10 20 30 40</div>
    <div class="elemento slice-30-fill">slice: 30 fill</div>
  </div>

</body>
</html>

En este ejemplo, cada elemento utiliza la misma imagen de borde (excepto el último, que usa un patrón para mostrar el fill), pero con diferentes valores de border-image-slice. Observa cómo cambian los bordes según los valores proporcionados.

Casos de Uso Comunes

Crear bordes decorativos con esquinas y bordes definidos.
Utilizar imágenes de patrones donde la repetición de los bordes es importante.
Implementar diseños que requieren que la región central de la imagen se use como fondo.

Compatibilidad del Navegador

La propiedad border-image-slice es compatible con la mayoría de 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

Asegúrate de que los valores de border-image-slice sean coherentes con la estructura de tu imagen de borde. Si los valores son demasiado grandes o pequeños, las esquinas o los bordes pueden aparecer distorsionados.
La propiedad border-image-width debe ser igual o menor que los valores de corte para evitar que la imagen se vea cortada de forma inesperada.
Experimenta con diferentes valores para entender cómo afectan la división de la imagen y el resultado final del borde.

Conclusión

La propiedad border-image-slice es una herramienta esencial para controlar cómo se utiliza una imagen como borde en CSS. Al comprender cómo dividir la imagen en nueve regiones, puedes crear bordes personalizados y visualmente atractivos que se adapten a tus diseños web. Recuerda combinarla con otras propiedades de border-image para obtener el efecto deseado.