border-image-repeat
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2016.
La propriété CSS border-image-repeat définit comment les images pour les côtés et la partie centrale de l'image de bordure sont mises à l'échelle et disposées en mosaïque. La région centrale peut être affichée en utilisant le mot-clé « fill » dans la propriété border-image-slice.
Exemple interactif
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
border-image-repeat: round stretch;
<section id="default-example">
<div id="example-element">Ceci est une boîte entourée d'une bordure.</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
background: #fff3d4;
color: black;
border: 30px solid;
border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
round;
font-size: 1.2em;
}
Syntaxe
/* Valeurs avec un mot-clé */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
/* côtés horizontaux | verticaux */
border-image-repeat: round stretch;
/* Valeurs globales */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: revert;
border-image-repeat: revert-layer;
border-image-repeat: unset;
La propriété border-image-repeat peut être définie à l'aide d'une ou deux valeurs parmi la liste qui suit.
- Avec une valeur indiquée, celle-ci s'applique aux quatre côtés.
- Avec deux valeurs indiquées, la première s'applique aux côtés haut et bas, la seconde s'applique aux côtés gauche et droite.
Valeurs
stretch-
Les régions de bord de l'image source sont étirées pour remplir l'espace entre chaque bordure.
repeat-
Les régions de bord de l'image source sont disposées en mosaïque (répétées) pour remplir l'espace entre chaque bordure. Les motifs peuvent être rognés pour s'ajuster correctement.
round-
Les régions de bord de l'image source sont disposées en mosaïque (répétées) pour remplir l'espace entre chaque bordure. Les motifs peuvent être étirés pour s'ajuster correctement.
space-
Les régions de bord de l'image source sont disposées en mosaïque (répétées) pour remplir l'espace entre chaque bordure. L'espace supplémentaire sera réparti entre les motifs pour s'ajuster correctement.
Définition formelle
| Valeur initiale | stretch |
|---|---|
| Applicabilité | tous les éléments sauf les éléments de table internes lorsque border-collapse vaut collapse. S'applique aussi à ::first-letter. |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
border-image-repeat =
[ stretch | repeat | round | space ]{1,2}
Exemples
Répéter l'image de bordure
CSS
#bordered {
width: 12rem;
margin-bottom: 1rem;
padding: 1rem;
border: 40px solid;
border-image: url("border.png") 27;
border-image-repeat: stretch; /* Peut être changé avec la liste déroulante */
}
Résultat
Spécifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-repeat |