Propriété CSS border-image-repeat

La propriété CSS border-image-repeat est utilisée pour spécifier si l'image de bordure border-image sera cerclée, répétée ou extensible.

La propriété border-image-repeat peut être spécifiée avec deux valeurs. Si la deuxième valeur est omise, on suppose qu'elle est la même que la première. Si on ne définit q'une valeur, elle applique le même comportement sur tous les quatres côtés; si on définit deux valeurs, la première s'applique aux côtés supérieur et inférieur, la deuxième au droit et au gauche.

Valeur initiale stretch
Appliquée à Tous les éléments, à l'exception des éléments de table intérieure quand border-collapse est "collapse". Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.borderImageRepeat = "round";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété border-image-slice</h2>
    <p class="border">border-image-repeat: round;</p>
    <p>Ici ce qui est utilisé est l'image originelle:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Voyons un exemple avec les valeurs "round" et "repeat" pour voir la différence entre elles.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété border-image-repeat</h2>
    <p class="border1">border-image-repeat: round;</p>
    <p class="border2">border-image-repeat: repeat;</p>
    <p>Ici on a utilisée l'image originelle:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Un autre exemple avec les valeurs "space" et "stretched".

Exemple

<!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>Exemple de la propriété border-image-repeat</h2>
    <p class="border1">border-image-repeat: space;</p>
    <p class="border2">border-image-repeat: stretch;</p>
    <p>Ici on a utilisée l'image originelle:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Valeurs

Valeur Description
stretch Chaque interstice entre chaque bordure sera compli avec des images extendues. C'est la valeur initiale.
repeat Chaque interstice entre chaque bordure sera compli avec des images répétées. Pour arriver à propre coupe, les répétitions peuvent être coupées.
round Chaque interstice entre chaque bordure sera compli avec des images répétées. Pour arriver à propre coupe, les répétitions peuvent être extendues.
space Chaque interstice entre chaque bordure sera compli avec des images répétées.Pour arriver à propre coupe, d'espace supplémentaire sera distribuée entre les répétitions.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

15.0+ 12.0+ 15.0+ 6.0+ 15.0+


Trouvez-vous cela utile?

Articles Associées