Propriété CSS border-image-repeat

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 initiale	stretch
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ée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.borderImageRepeat = "round";

Syntaxe

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

css

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

html

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

Try it Yourself »

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

html

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

Try it Yourself »

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

html

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

Try it Yourself »

Valeurs

Valeur	Description	Essayer »
stretch	Chaque espace entre les bordures sera rempli par des images étirées. Il s'agit de la valeur par défaut.	Essayer »
repeat	Chaque 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 »
round	Chaque 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 »
space	Chaque 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.
initial	Définit la propriété sur sa valeur par défaut.	Essayer »
inherit	Hérite la propriété de son élément parent.

Propriété CSS border-image-repeat ​

Syntaxe ​

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

Résultat ​

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

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

Valeurs ​

Pratique ​

Propriété CSS border-image-repeat

Syntaxe

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

Résultat

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

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

Valeurs

Pratique