Propriété CSS border-image-repeat

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.