Propiedad CSS border-image-repeat

La propiedad CSS border-image-repeat se utiliza para especificar si la border-image será redonda, repetida o estirada. Es una de las propiedades CSS3.

La propiedad border-image-repeat puede definirse utilizando 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 derecha.

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

Sintaxis

Sintaxis de la propiedad CSS border-image-repeat

css

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(https://es.w3docs.com/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="https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Resultado

CSS border-image-repeat Property

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(https://es.w3docs.com/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(https://es.w3docs.com/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="https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

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

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(https://es.w3docs.com/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(https://es.w3docs.com/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="https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probar
stretch	Cada espacio entre cada borde se rellenará con imágenes estiradas. Este es el valor predeterminado.	Probar »
repeat	Cada espacio entre cada borde se rellenará con imágenes repetidas. Para lograr un ajuste adecuado, las repeticiones pueden recortarse.	Probar »
round	Cada espacio entre cada borde se rellenará con imágenes repetidas. Para lograr un ajuste adecuado, las repeticiones pueden estirarse.	Probar »
space	Cada espacio entre cada borde se rellenará con imágenes repetidas. Para lograr un ajuste adecuado, el espacio extra se distribuirá entre las repeticiones.
initial	Establece la propiedad en su valor predeterminado.	Probar »
inherit	Hereda la propiedad de su elemento principal.

Propiedad CSS border-image-repeat ​

Sintaxis ​

Ejemplo de la propiedad border-image-repeat: ​

Resultado ​

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

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

Valores ​

Práctica ​

Propiedad CSS border-image-repeat

Sintaxis

Ejemplo de la propiedad border-image-repeat:

Resultado

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

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

Valores

Práctica