Características border-image-width en CSS

La propiedad border-image-width en CSS define el ancho de la imagen del marco especificando su distancia desde el borde exterior del marco, y si el valor de la propiedad es border-image-width mayor que el valor de la propiedad border-width, la imagen del marco se extenderá más allá del relleno o del borde del contenido.

Funciones border-image-width css

Valor inicial	`1`
Aplicado a	Todos los elementos excepto los elementos de tabla interiores en el que la propiedad se establece `border-collapse` a `collapse`.
Heredable	No.
Móvil	No.
Valor calculado	Como se especifica, pero con longitudes relativas convertidas a longitudes absolutas.

/* border-image-width: todos */ 
border-image-width :  3;
/* border-image-width: vertical horizontal */ 
border-image-width :  2em  3em;
/* border-image-width: superior horizontal inferior */ 
border-image-width :  5%  15%  10%;
/* border-image-width: arriba a la derecha abajo a la izquierda */ 
border-image-width :  5%  2em  10%  auto;
/* Valores globales */ 
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;

Ejemplos y aplicaciones

Consulte la página border-image para ver ejemplos de esta función.

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	15.0	15.0	11	15	6

Características generales

Esta propiedad puede tomar uno, dos, tres o cuatro valores, y el valor puede ser una longitud <length>, un porcentaje <percentage> o una palabra reservada auto.

Si se especifica un valor, se aplicará a los cuatro bordes.
Si se especifican dos valores, se establece el ancho de los bordes vertical y horizontal (respectivamente y en orden).
Donde si se especifican tres valores, entonces se establecen el ancho del borde superior, los bordes horizontales y el borde inferior (respectivamente y en orden).
Si se especifican cuatro valores, se establecerá el ancho de los bordes superior, derecho, inferior e izquierdo (respectivamente y en orden).

<length> o <percentage>

Este valor representa el ancho del marco y puede ser un valor absoluto o relativo, y los valores relativos se refieren a las dimensiones del marco en relación con el ancho o alto correspondiente de la imagen. Pero este valor no puede ser negativo.

<number>

Este valor representa el número de veces que se debe multiplicar el valor de la propiedad border-width y este valor no puede ser negativo.

auto

Este valor ajustará el ancho del marco al ancho o alto real de la imagen que se está utilizando. Si la imagen no tiene las dimensiones reales, el valor se tomará del valor calculado de la propiedad border-width.

Estructura border-image-width css

border-image-width: [ <length-percentage> | <number> | auto ]{1,4};

dónde:

<length-percentage> = <length> | <percentage>

Vea también

La página de propiedades establecido por la propiedad de acceso directo border-image: border-image-source, border-image-slice, border-image-outset y border-image-repeat.
La página de propiedades establecido por la propiedad de acceso directo border: border-width, border-style y border-color.