Propiedad CSS border-image-slice

La propiedad border-image-slice especifica cómo dividir la imagen especificada por border-image-source en nueve regiones: cuatro esquinas, cuatro bordes y una parte central. La parte "central" es completamente transparente hasta que se establece el valor "fill". Es una de las propiedades CSS3.

La propiedad border-image-slice tiene tres valores: number, percentage y fill. El número representa un desplazamiento del borde en píxeles para imágenes rasterizadas y coordenadas para imágenes vectoriales. El porcentaje representa un desplazamiento del borde como un porcentaje del tamaño de la imagen de origen. Fill hace que la parte central de la imagen se muestre como una imagen de fondo.

Esta propiedad puede tomar hasta cuatro valores. No se permiten valores negativos. Si se aplica un valor, establece los cuatro cortes a la misma distancia de sus respectivos lados. Si se especifican dos valores, el primero crea cortes medidos desde la parte superior e inferior. El segundo crea cortes medidos desde la izquierda y la derecha. Si se aplican tres valores, el primero crea cortes medidos desde la parte superior, el segundo desde la izquierda y la derecha, y el tercero desde la parte inferior. Y si se especifican cuatro valores, crean cortes desde los cuatro lados.

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

css

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)

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("https://es.w3docs.com/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="https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Resultado

CSS border-image-slice Property

Otro ejemplo donde se utilizan dos valores. El primer valor crea cortes medidos desde la parte superior e inferior. El segundo 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

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("https://es.w3docs.com/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="https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

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

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("https://es.w3docs.com/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="https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Valores

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

Practice

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

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

Propiedad CSS border-image-slice ​

Sintaxis ​

Ejemplo de la propiedad border-image-slice: ​

Resultado ​

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

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

Valores ​

Practice ​

Propiedad CSS border-image-slice

Sintaxis

Ejemplo de la propiedad border-image-slice:

Resultado

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

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

Valores

Practice