border-image-repeat

Resumen

La propiedad CSS border-image-repeat define cómo se manejará la parte media de una imagen de borde para que coincida con el tamaño del borde. Tiene sintaxis de un valor, el cual describe el comportamiento de todos los lados, y otra sintaxis de dos valores, que establece diferentes valores para el comportamiento horizontal y vertical.

Valor inicialstretch
Applies toall elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

/* border-image-repeat: type */
border-image-repeat: stretch;

/* border-image-repeat: horizontal vertical */
border-image-repeat: round stretch;

/* Global values */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;

Valores

type
Puede ser stretch, repeat, o round, que denotan cómo será tratada la imagen vertical y horizontalmente.
horizontal
Puede ser stretch, repeat, o round, denotando cómo será tratada la imagen horizontalmente.
vertical
Puede ser stretch, repeat, o round, denotando cómo será tratada la imagen verticalmente.
stretch
Palabra clave que indica que la imagen deberá ser estirada para cubrir el espacio entre dos bordes.
repeat
Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes.
round
Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes. Si la imagen no se ajusta después de repetirse un número íntegro de veces, la imagen es escalada para ajustarse.
space
La imagen es repetida hasta cubrir el área del elemento. Si no se cubre el área completa con un número de imágenes, el espacio extra es distribuido al rededor de éstas.

Sintaxis formal

[ stretch | repeat | round | space ]{1,2}

Ejemplo

Contenido CSS

#borderImageRepetition {
  width: 260px;
  height: 80px;
  margin-bottom: 10px;
  border: 30px solid;
  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
  border-image-repeat: stretch; /* Puede ser modificado en el ejemplo en vivo */
}

Especificaciones

Especificación Estatus Comentarios
CSS Backgrounds and Borders Module Level 3
La definición de 'border-image-repeat' en esta especificación.
Candidate Recommendation Definición inicial

Compatibilidad de navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
border-image-repeatChrome Soporte completo 15Edge Soporte completo 12Firefox Soporte completo 15IE Soporte completo 11Opera Soporte completo 15Safari Soporte completo 6WebView Android Soporte completo ≤37Chrome Android Soporte completo 18Firefox Android Soporte completo 15Opera Android ? Safari iOS Soporte completo 9.3Samsung Internet Android ?
roundChrome Soporte completo 30Edge Soporte completo 12Firefox Soporte completo 15IE Soporte completo 11Opera Soporte completo 17Safari Soporte completo 9.1WebView Android Soporte completo ≤37Chrome Android Soporte completo 30Firefox Android Soporte completo 15Opera Android ? Safari iOS Soporte completo 9.3Samsung Internet Android ?
spaceChrome Soporte completo 56Edge Soporte completo 12Firefox Soporte completo 50IE Soporte completo 11Opera Soporte completo 43Safari Soporte completo 9.1WebView Android Soporte completo 56Chrome Android Soporte completo 56Firefox Android Soporte completo 50Opera Android ? Safari iOS Soporte completo 9.3Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibilidad desconocida  
Compatibilidad desconocida

Véase también