border-image-repeat

La propriété border-image-repeat définit la façon dont les zones de l'image de bordure sont utilisée pour s'étendre sur chacun des côtés de la bordure. Cette propriété est multi-valuée : une valeur indiquera le comportement pour tous les côtés et deux valeurs indiqueront respectivement le comportement pour les côtés horizontaux et verticaux.

Valeur initialestretch
Applicabilitétous les éléments sauf les éléments de table internes lorsque border-collapse vaut collapse. S'applique aussi à ::first-letter.
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* border-image-repeat                      */
/* Une valeur : s'applique à tous les côtés */
border-image-repeat: stretch;

/* border-image-repeat 
/* Première valeur : côtés horizontaux */
/* Deuxième valeur : côtés verticaux   */
border-image-repeat: round stretch;

/* Valeurs globales */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;

Valeurs

stretch
Un mot-clé qui indique que la zone de l'image doit être étirée pour remplir l'espace entre les deux bordures.
repeat
Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures.
round
Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. Si on ne peut pas remplir cet espace avec un nombre entier de motifs, ceux-ci seront étirés pour qu'il y ait une répétition entière et que l'espace soit parfaitement rempli.
space
Un mot-clé qui indique que la zone de l'image est répétée afin de remplir la zone entre les deux bordures. Si on ne peut pas remplir exactement la zone avec un nombre entier de motifs, l'espace restant sera répartis entre ces motifs.

Syntaxe formelle

[ stretch | repeat | round | space ]{1,2}

Exemples

CSS

p {
 border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
 border-image-slice: 30;
 border-image-width: 20px;
 border-image-repeat: round;
 padding: 40px;
}

HTML

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
  no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-image-repeat' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 15.0 15.0 (15.0) 11 15 6
round 30[3] 15.0 (15.0) 11 ? 9.1[4]
space Pas de support[1] 50.0 (50.0)[2] 11 Pas de support 9.1[4]
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? 15.0 (15.0) Pas de support ? 9.3[4]
round ? 15.0 (15.0) ? ? ?
space ? 50.0 (50.0)[2] ? ? ?

[1] La valeur space est prise en charge mais a le même effet que repeat, voir Chromium bug 584916.

[2] Implémenté avec bug 720531.

[3] Voir Chromium bug 169254.

[4] Voir WebKit bug 14185.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,