MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

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
The definition of 'border-image-repeat' in that specification.
Candidate Recommendation Definición inicial

Compatibilidad de navegadores

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 No support[1] 50.0 (50.0)[2] 11 No support 9.1[4]
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico ? 15.0 (15.0) No support ? 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 Chromium bug 584916.

[2] Implementado en bug 720531.

[3] Véase Chromium bug 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,