Propriété CSS border-image-repeat

La propriété CSS border-image-repeat contrôle la façon dont les tranches latérales d'une border-image sont mises à l'échelle pour remplir les bords d'un élément. Elle détermine si ces tranches sont étirées, répétées en mosaïque, arrondies pour qu'un nombre entier de tuiles s'adapte, ou espacées avec des intervalles. C'est l'une des propriétés CSS3.

Lorsque vous fournissez une image de bordure, la propriété border-image-slice la découpe en neuf régions : quatre coins, quatre bords et un centre. Les coins sont toujours placés une seule fois à chaque angle — mais les quatre tranches de bord doivent généralement couvrir une distance qui n'est pas un multiple exact de la taille de la tranche. border-image-repeat indique au navigateur comment gérer cette différence.

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

Valeur initiale	stretch
S'applique à	Tous les éléments, sauf les éléments de table internes lorsque border-collapse vaut "collapse". S'applique également à ::first-letter.
Hérité	Non.
Animatable	Non.
Version	CSS3
Syntaxe DOM	object.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

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 »

Comportement de chaque valeur

Les quatre mots-clés diffèrent uniquement dans la façon dont ils gèrent le fait qu'une tranche de bord se répète rarement de façon uniforme dans le côté qu'elle doit remplir :

stretch (valeur par défaut) prend une seule tranche de bord et la met à l'échelle pour couvrir tout le côté. Il n'y a pas de répétition en mosaïque, donc un motif avec des éléments distincts (points, formes, texte) sera déformé, mais un dégradé lisse ou une texture uniforme reste inchangé.
repeat répète la tranche de bord à sa taille naturelle et coupe simplement ce qui ne rentre pas. Les tuiles conservent leurs proportions, mais vous pouvez voir une tuile partielle coupée à chaque coin — et le motif n'est généralement pas centré.
round répète également en mosaïque, mais redimensionne légèrement la tranche en premier pour qu'un nombre entier de tuiles s'adapte exactement entre les coins. Utilisez cette valeur lorsque vous souhaitez une répétition propre et symétrique sans tuiles coupées, et qu'une légère distorsion est acceptable.
space répète à la taille naturelle comme repeat, mais au lieu de couper, supprime la tuile partielle restante et distribue l'espace libéré sous forme d'intervalles égaux entre les tuiles complètes. (space bénéficie du moins bon support navigateur des quatre valeurs.)

Une règle pratique : choisissez stretch pour les dégradés et les textures continues, round pour les motifs décoratifs où la symétrie est importante, et repeat ou space lorsque vous souhaitez conserver le motif exactement à sa taille d'origine.

Remarque : border-image-repeat n'a aucun effet seule — l'élément doit déjà avoir un border-image-source défini et une largeur de bordure non nulle. Elle est le plus souvent utilisée dans le cadre de la propriété raccourcie border-image plutôt qu'isolément.

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 s'adapter, les répétitions peuvent être rognées.	Essayer »
round	Chaque espace entre les bordures sera rempli par des images répétées. Pour s'adapter, 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 s'adapter, un espace supplémentaire est distribué entre les répétitions.
initial	Définit la propriété à sa valeur par défaut.	Essayer »
inherit	Hérite de la propriété de son élément parent.

Pratique

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

Propriétés associées

Les autres propriétés longues border-image-* fonctionnent conjointement avec border-image-repeat :

border-image — la propriété raccourcie qui les définit toutes en une fois.
border-image-source — l'image à utiliser.
border-image-slice — la façon dont la source est découpée en neuf régions.
border-image-width — la largeur de la zone border-image.
border-image-outset — jusqu'où l'image s'étend au-delà de la boîte de bordure.