border-image-slice

Resumen

La propiedad CSS border-image-slice divide la imagen especificada por border-image-source (en-US) en nueve regiones: las cuatro esquinas, los cuatro bordes y el espacio enmedio. Esto se hace especificando cuatro desplazamientos hacia adentro.

Cuatro valores controlan la posición de las líneas de corte. Si algunas no son especificada, se infieren de las otras, con la sintaxis común de cuatro valores de CSS.

La región media no es usada por el borde en sí, pero sí se usa como imagen de fondo si se establece la palabra clave fill. Se puede establecer este valor en cualquier posición en la propiedad (antes, después o entre los otros valores).

Las propiedades border-image-repeat, border-image-width (en-US) y border-image-outset definen cómo se usarán estas imágenes.

La propiedad abreviada border-image podría restaurar esta propiedad a su valor predeterminado.

Valor inicial	`100%`
Applies to	all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`.
Heredable	no
Percentages	refer to the size of the border image
Valor calculado	one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified
Animation type	by computed value type

Sintaxis

/* border-image-slice: slice */
border-image-slice: 30%;

/* border-image-slice: horizontal vertical */
border-image-slice: 10% 30%;

/* border-image-slice: top horizontal bottom */
border-image-slice: 30 30% 45;

/* border-image-slice: top right bottom left */
border-image-slice: 7 12 14 5;

/* border-image-slice: … fill */
/* The fill value can be placed between any value */
border-image-slice: 10% fill 7 12;

/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;

Valores

slice: Es un valor <number> o <percentage> de la separación de las cuatro líneas de corte. Un valor <number> representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores <percentage> son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inváildos, y valores mayores al tamaño relevante, anchura o altura, son restringidos a 100%.
horizontal: Es un valor <number> o <percentage> de la separación de las dos líneas de corte horizontales, la superior y la inferior. El valor <number> representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores <percentage> son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
vertical: Es un valor <number> o <percentage> de la separación de las dos líneas de corte verticales, la izquierda y la derecha. El valor <number> representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores <percentage> son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
top: Es un valor <number> o <percentage> de la separación de la línea de corte superior. El valor <number> representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores <percentage> son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
bottom: Es un valor <number> o <percentage> de la separación de la línea de corte inferior. El valor <number> representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores <percentage> son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
right: Es un valor <number> o <percentage> de la separación de la línea de corte derecha. El valor <number> representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores <percentage> son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
left: Es un valor <number> o <percentage> de la separación de la línea de corte izquierda. El valor <number> representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores <percentage> son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
fill: Es una palabra clave cuya presencia forza que la región media de la imagen sea mostrada sobre la imagen de fondo; su tamaño y altura son redimensionados acorde a los fragmentos superior e izquierdo, respectivamente.
inherit: Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de su elemento padre.

Sintaxis formal

<number-percentage>{ (en-US)1,4} (en-US) && (en-US) fill? (en-US)where 
<number-percentage> = <number> | (en-US) <percentage>

Especificaciones

Especificación	Estatus	Comentarios
CSS Backgrounds and Borders Module Level 3 La definición de 'border-image-slice' en esta especificación.	Candidate Recommendation	Definición inicial

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Escritorio
Móvil

Característica	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Soporte básico	15.0	(Yes)	15.0 (15.0)^[1]	11	15	6

Característica	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Soporte básico	4.1-webkit (en-US)	(Yes)	15.0 (15.0)	Sin soporte	?	?

[1] Hasta Gecko 47.0 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44) las imágenes SVGs sin viewport no eran divididas correctamente (error 619500). A partir de Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) son mostradas igual que los SVGs con viewport, aunque si las partes no son exactamente el 50%, son ajustadas incorrectamente (error 1264809). Esto fue arreglado en Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), aunque aun hay un problema con los SVGs sin viewport donde e10s es deshabilitado (error 1284798).

También, SVGs pequeños son ajustados incorrectamente, porque los porcentajes en border-image-slice son calculados como enteros, en vez de reales (error 1284797).

Véase también

Illustrated description of the 1-to-4-value syntax