We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 15.0 15.0 (15.0) 11 15 6
round 30[3] 15.0 (15.0) 11 ? 9.1[4]
space Sin soporte[1] 50.0 (50.0)[2] 11 Sin soporte 9.1[4]
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico ? 15.0 (15.0) Sin soporte ? 9.3[4]
round ? 15.0 (15.0) ? ? ?
space ? 50.0 (50.0)[2] ? ? ?

[1] Soporta el valor space, pero el efecto real es el mismo que el de repeat. Véase Error Chromium 584916.

[2] Implementado en error 720531.

[3] Véase Error Chromium 169254.

[4] Véase WebKit bug 14185.

Véase también

Etiquetas y colaboradores del documento

Colaboradores en esta página: israel-munoz
Última actualización por: israel-munoz,