Características border-image-width en CSS

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 inicial1
Aplicado aTodos los elementos excepto los elementos de tabla interiores en el que la propiedad se establece border-collapsecollapse.
HeredableNo.
MóvilNo.
Valor calculadoComo 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ísticaChromeFirefoxIEÓperaSafari
Soporte básico15.015.011156

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-imageborder-image-sourceborder-image-sliceborder-image-outsetborder-image-repeat.
  • La página de propiedades establecido por la propiedad de acceso directo borderborder-widthborder-styleborder-color.