border-image-slice

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

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-width 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 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

css
/* 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%.

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

border-image-slice = 
[ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
fill?

Especificaciones

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-slice

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-image-slice

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Véase también