Atributo border-image-slice CSS

Definición y uso

La propiedad border-image-slice especifica el desplazamiento hacia adentro del borde de la imagen.

Vea también:

Tutoriales de CSS3:Borde de CSS3

Ejemplo

Define el desplazamiento hacia adentro del borde de la imagen:

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

Sintaxis de CSS

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

Notas:Esta propiedad especifica el desplazamiento hacia adentro del borde de la imagen en los lados superior, derecho, inferior e izquierdo, la imagen se divide en nueve áreas: cuatro esquinas, cuatro lados y una área central. A menos que se utilice la palabra clave fill, la parte central de la imagen se descartará. Si se omite el cuarto valor/porcentaje, será el mismo que el segundo valor. Si se omite el tercer valor, será el mismo que el primero. Si se omite el segundo valor, será el mismo que el primero.

Valor del atributo

Valor Descripción
number Valor numérico, que representa los píxeles en la imagen (si es una imagen raster) o las coordenadas vectoriales (si es una imagen vectorial).
% Porcentajes en relación con el tamaño de la imagen: el ancho afecta el desplazamiento horizontal, y la altura afecta el desplazamiento vertical.
fill Mantener la parte central de la imagen del borde.

Detalles técnicos

Valor predeterminado: 100%
Herencia: no
Versión: CSS3
Sintaxis de JavaScript: object.style.borderImageSlice="50% 50%"

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente esta propiedad.

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

Consulte border-image propiedad.