Propiedad CSS border-image-repeat

La propiedad CSS border-image-repeat controla cómo se escalan los fragmentos laterales de una border-image para rellenar los bordes de un elemento. Determina si esos fragmentos se estiran, se repiten (como mosaico), se redondean para que encaje un número entero de teselas, o se espacian con huecos. Es una de las propiedades CSS3.

Cuando se proporciona una imagen de borde, la propiedad border-image-slice la divide en nueve regiones: cuatro esquinas, cuatro bordes y un centro. Las esquinas siempre se colocan una vez en cada esquina, pero los cuatro fragmentos de borde suelen tener que cubrir una distancia que no es un múltiplo exacto del tamaño del fragmento. border-image-repeat es lo que indica al navegador cómo gestionar ese desajuste.

La propiedad puede definirse con uno o dos valores. Si se especifica un valor, se aplica el mismo comportamiento en los cuatro lados. Si se especifican dos valores, el primero se aplica a la parte superior e inferior, y el segundo a la izquierda y la derecha.

Valor inicial	stretch
Se aplica a	Todos los elementos, excepto los elementos de tabla internos cuando border-collapse es "collapse". También se aplica a ::first-letter.
Heredado	No.
Animatable	No.
Versión	CSS3
Sintaxis DOM	object.style.borderImageRepeat = "round";

Sintaxis

Sintaxis de la propiedad CSS border-image-repeat

border-image-repeat: stretch | repeat | round | space | initial | inherit;

Ejemplo de la propiedad border-image-repeat:

Ejemplo de la propiedad CSS border-image-repeat con el valor round

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: round;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border">border-image-repeat: round;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad border-image-repeat con los valores "round" y "repeat":

Ejemplo de la propiedad CSS border-image-repeat con los valores round y repeat

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: round;
        border-image-width: 10px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: repeat;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border1">border-image-repeat: round;</p>
    <p class="border2">border-image-repeat: repeat;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad border-image-repeat con los valores "space" y "stretch":

Ejemplo de la propiedad CSS border-image-repeat con los valores space y stretch

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: space;
        border-image-width: 10px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: stretch;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border1">border-image-repeat: space;</p>
    <p class="border2">border-image-repeat: stretch;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Pruébalo tú mismo »

Comportamiento de cada valor

Las cuatro palabras clave solo difieren en cómo gestionan el hecho de que un fragmento de borde raramente encaja de manera uniforme en el lado que debe rellenar:

stretch (el valor por defecto) toma un único fragmento de borde y lo escala para abarcar todo el lado. No hay mosaico, por lo que un patrón con motivos bien definidos (puntos, formas, texto) se distorsiona, pero un degradado suave o una textura uniforme permanece sin cambios.
repeat aplica el fragmento de borde como mosaico a su tamaño natural y simplemente recorta lo que no cabe. Las teselas mantienen sus proporciones, pero puede aparecer una tesela parcial cortada en cada esquina, y el patrón generalmente no queda centrado.
round también usa mosaico, pero primero reescala ligeramente el fragmento para que un número entero de teselas encaje exactamente entre las esquinas. Úsalo cuando quieras una repetición limpia y simétrica sin teselas cortadas, y una pequeña distorsión sea aceptable.
space usa mosaico al tamaño natural como repeat, pero en lugar de recortar, elimina la tesela parcial sobrante y distribuye el espacio liberado como huecos iguales entre las teselas completas. (space tiene el menor soporte de navegadores de los cuatro.)

Una regla práctica: elige stretch para degradados y texturas continuas, round para patrones decorativos donde importa la simetría, y repeat o space cuando quieras que el motivo conserve exactamente su tamaño original.

Nota: border-image-repeat no tiene efecto por sí sola — el elemento ya debe tener un border-image-source definido y un ancho de borde distinto de cero. Con mayor frecuencia se escribe como parte de la abreviatura border-image en lugar de usarse de forma independiente.

Valores

Valor	Descripción	Pruébalo
stretch	Cada hueco entre los bordes se rellenará con imágenes estiradas. Este es el valor por defecto.	Pruébalo »
repeat	Cada hueco entre los bordes se rellenará con imágenes repetidas. Para conseguir el ajuste adecuado, las repeticiones pueden recortarse.	Pruébalo »
round	Cada hueco entre los bordes se rellenará con imágenes repetidas. Para conseguir el ajuste adecuado, las repeticiones pueden estirarse.	Pruébalo »
space	Cada hueco entre los bordes se rellenará con imágenes repetidas. Para conseguir el ajuste adecuado, se distribuirá espacio adicional entre las repeticiones.
initial	Establece la propiedad en su valor por defecto.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué valores se pueden usar con la propiedad CSS border-image-repeat?

Propiedades relacionadas

Las demás formas abreviadas border-image-* funcionan junto con border-image-repeat:

border-image — la abreviatura que las establece todas a la vez.
border-image-source — la imagen a utilizar.
border-image-slice — cómo se divide la fuente en nueve regiones.
border-image-width — el ancho del área de la imagen de borde.
border-image-outset — hasta qué distancia se extiende la imagen más allá del cuadro de borde.