Característica border-image-repeat en CSS

Característica border-image-repeat en CSS

La propiedad border-image-repeat CSS define cómo mostrar la parte central de la imagen del marco para que coincida con las dimensiones del marco. Se puede usar un valor para esta propiedad para establecer el comportamiento de todos los bordes, o se pueden especificar dos valores para establecer el comportamiento de los bordes horizontales y verticales por separado.

Funciones border-image-repeat css

Valor inicialstretch
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 especificó.
/* border-image-repeat: type */ 
border-image-repeat :  stretch;
/* border-image-repeat: horizontal vertical */ 
border-image-repeat : round stretch;
/* valores globales */ 
border-image-repeat : inherit;
border-image-repeat : initial;
border-image-repeat : 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
Ronda de valor3015.011?9.1
Valor del espacio565011No soportado9.1

Características generales

La propiedad acepta border-image-repeat una palabra reservada (para todos los bordes) o dos palabras (para los bordes horizontales y verticales por separado) de los siguientes valores:

stretch

Esta palabra reservada indica que se debe cambiar el tamaño de la imagen para llenar el espacio entre los dos marcos.

repeat

Esta palabra reservada indica que la imagen debe repetirse hasta que ocupe el espacio entre los dos fotogramas.

round

Esta palabra reservada indica que la imagen debe repetirse hasta que ocupe el espacio entre los dos fotogramas. Si una imagen no se escala después de repetirse un número entero de veces, se cambiará de tamaño a la escala.

space

Esta palabra reservada indica que la imagen debe repetirse hasta que ocupe el espacio entre los dos fotogramas. Si la imagen no encaja después de la iteración un número entero de veces, el espacio vacío entre las iteraciones se distribuirá para llenar el espacio.

Estructura border-image-repeat css

border-image-repeat: [ stretch | repeat | round | space ]{1,2};

Vea también

  • La página de propiedades establecido por la propiedad de acceso directo border-imageborder-image-sourceborder-image-sliceborder-image-widthborder-image-outset.
  • La página de propiedades establecido por la propiedad de acceso directo borderborder-widthborder-style, y border-color.