W3docs
fr
Se connecter

Propriété CSS border-image-repeat

The CSS border-image-repeat property is used to specify if the border image will be rounded, repeated or stretched. See an example and try it yourself.

La propriété CSS border-image-repeat est utilisée pour spécifier si l'image de bordure sera arrondie, répétée ou étirée. Il s'agit de l'une des propriétés CSS3.

La propriété border-image-repeat peut être définie avec une ou deux valeurs. Si une seule valeur est spécifiée, elle s'applique aux quatre côtés. Si deux valeurs sont spécifiées, la première s'applique au haut et au bas, et la seconde à la gauche et à la droite.

Valeur initialestretch
S'applique àTous les éléments, à l'exception des éléments de tableau internes lorsque border-collapse est "collapse". Elle s'applique également à ::first-letter.
HéritéeNon.
AnimableNon.
VersionCSS3
Syntaxe DOMobject.style.borderImageRepeat = "round";

Syntaxe

Syntaxe de la propriété CSS border-image-repeat

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

Exemple de la propriété border-image-repeat :

Exemple de la propriété CSS border-image-repeat avec la valeur 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>
Essayez vous-même »

Résultat

Propriété CSS border-image-repeat

Exemple de la propriété border-image-repeat avec les valeurs "round" et "repeat" :

Exemple de la propriété CSS border-image-repeat avec les valeurs round et 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>
Essayez vous-même »

Exemple de la propriété border-image-repeat avec les valeurs "space" et "stretch" :

Exemple de la propriété CSS border-image-repeat avec les valeurs space et 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>
Essayez vous-même »

Valeurs

ValeurDescriptionEssayer »
stretchChaque espace entre les bordures sera rempli par des images étirées. Il s'agit de la valeur par défaut.Essayer »
repeatChaque espace entre les bordures sera rempli par des images répétées. Pour un ajustement correct, les répétitions peuvent être coupées.Essayer »
roundChaque espace entre les bordures sera rempli par des images répétées. Pour un ajustement correct, les répétitions peuvent être étirées.Essayer »
spaceChaque espace entre les bordures sera rempli par des images répétées. Pour un ajustement correct, un espace supplémentaire sera distribué entre les répétitions.
initialDéfinit la propriété sur sa valeur par défaut.Essayer »
inheritHérite la propriété de son élément parent.

Pratique

Pratique

Quelles valeurs peuvent être utilisées avec la propriété CSS border-image-repeat ?