Propiedad CSS border-image-slice

La propiedad CSS border-image-slice define cómo recortar la imagen establecida por border-image-source para que el navegador pueda usar las piezas como borde. La imagen se divide en nueve regiones: cuatro esquinas, cuatro bordes y una parte central. Es una de las propiedades de CSS3.

Imagina dos líneas horizontales y dos líneas verticales trazadas sobre la imagen de origen. Donde se cruzan, dividen la imagen en una cuadrícula de 3×3. Las cuatro piezas de las esquinas se colocan en las esquinas del borde del elemento, las cuatro piezas de los lados se estiran o repiten a lo largo de cada lado (controlado por border-image-repeat), y la pieza central se descarta de forma predeterminada — permanece completamente transparente a menos que añadas la palabra clave fill, en cuyo caso se dibuja detrás del contenido como una imagen de fondo.

border-image-slice es la propiedad que decide dónde caen esas cuatro líneas. Por sí sola no produce ningún efecto visible; siempre funciona junto con border-image-source y un border-width distinto de cero (o el border-image-width de la propiedad abreviada). Por eso todos los ejemplos a continuación también establecen un border transparente y usan la propiedad abreviada border-image para proporcionar la fuente.

Cómo funcionan los valores

La propiedad acepta un number, un percentage y una palabra clave fill opcional:

number — un desplazamiento de borde medido en píxeles para imágenes de mapa de bits (PNG, JPEG) y en coordenadas para imágenes vectoriales (SVG). Nota: el número es sin unidades aquí — escribe 30, no 30px.
percentage — un desplazamiento de borde como porcentaje del tamaño de la imagen de origen (su ancho para los cortes izquierdo/derecho, su alto para los cortes superior/inferior).
fill — mantiene y muestra la región central en lugar de descartarla.

Puedes dar uno a cuatro valores de desplazamiento. No se permiten valores negativos, y los desplazamientos mayores que la imagen se limitan. Los valores siguen el orden estándar de bordes de CSS:

Valores dados	Significado
`20%`	Los cuatro lados se cortan a la misma distancia.
`30 50`	Superior e inferior = `30`; izquierdo y derecho = `50`.
`30 50 10`	Superior = `30`; izquierdo y derecho = `50`; inferior = `10`.
`30 50 10 5`	Superior = `30`; derecho = `50`; inferior = `10`; izquierdo = `5` (en sentido horario desde arriba).

¿Cuándo debería usarlo?

Usa border-image-slice cuando construyas un marco decorativo a partir de una sola imagen — bordes ornamentados, bordes de cinta, paneles de estilo cómic o gráficos de "burbuja" redondeados que deben escalar a cualquier tamaño de elemento sin distorsionar las esquinas. Al separar las esquinas de la parte central extensible de los lados, las esquinas permanecen nítidas a cualquier ancho del elemento mientras los lados se repiten o estiran para ajustarse.

Valor inicial	100%.
Se aplica a	Todos los elementos. También se aplica a ::first-letter.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.borderImageSlice = "10%";

Sintaxis

Sintaxis de la propiedad CSS border-image-slice

border-image-slice: number | % | fill | initial | inherit;

Ejemplo de la propiedad border-image-slice:

Ejemplo de la propiedad CSS border-image-slice con valor % (porcentaje)

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 20%;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">Here the border-image-slice is set to 20%.</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Pruébalo tú mismo »

Resultado

En el siguiente ejemplo se utilizan dos valores. El primer valor (30) crea cortes medidos desde la parte superior e inferior, y el segundo valor (50) crea cortes medidos desde la izquierda y la derecha.

Ejemplo de la propiedad border-image-slice con dos valores:

Ejemplo de la propiedad CSS border-image-slice con dos valores

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 30 50;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">Here the border-image-slice is set to 30 and 50.</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Pruébalo tú mismo »

En el siguiente ejemplo el valor % se combina con la palabra clave fill, por lo que la región central descartada de la imagen también se dibuja detrás del contenido del párrafo.

Ejemplo de la propiedad border-image-slice con los valores "%" y "fill":

Ejemplo de la propiedad CSS border-image-slice con valores de porcentaje y fill

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 15% fill;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border"><strong>Here the border-image-slice is set to 15 fill.</strong></p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
number	Representa un desplazamiento de borde en píxeles para imágenes de mapa de bits y en coordenadas para imágenes vectoriales.	Pruébalo »
%	Representa un desplazamiento de borde como porcentaje del tamaño de la imagen de origen.	Pruébalo »
fill	Hace que la parte central de la imagen se muestre como imagen de fondo.	Pruébalo »
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

border-image-slice es una de las varias propiedades individuales que conforman la propiedad abreviada border-image. Para tener una visión completa de cómo se construyen los bordes de imagen, consulta también:

border-image-source — establece la imagen a recortar.
border-image-width — establece el ancho del área de la imagen de borde.
border-image-repeat — controla cómo los cortes de los lados se estiran, repiten o redondean.
border-image-outset — desplaza la imagen de borde más allá del cuadro de borde.

Práctica

¿Qué hace la propiedad border-image-slice en CSS?

Controla la cantidad del campo de entrada que debe estar dentro del área de texto.Divide la imagen usada para crear un borde en 9 regiones: 4 esquinas, 4 bordes y una parte central.Se usa para crear transformaciones 3D, transiciones y animaciones en HTML y CSS.Define cómo se rellena y escala la imagen de borde respecto al cuadro de borde.