border-image-slice

Resumen

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

The nine slices defined by the CSS border-image shorthand or border-image-slice longhand propertiesCuatro 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-widthborder-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 inicial100%
Applies toall elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Heredableno
Percentagesrefer to the size of the border image
Valor calculadoone to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specified
Animation typeby 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><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><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><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><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><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><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><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>{1,4} && fill?

where
<number-percentage> = <number> | <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!
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 (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