border-image-repeat

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

La propriété CSS border-image-repeat définit la façon dont les zones de l'image de bordure sont utilisées pour s'étendre sur chacun des côtés de la bordure.

Exemple interactif

Syntaxe

css
/* 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: 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

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. Les portions répétées peuvent être rognées si nécessaire.

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éparti entre ces motifs.

Définition formelle

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
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

border-image-repeat = 
[ stretch | repeat | round | space ]{1,2}

Exemples

Répéter l'image de bordure

CSS

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
# the-border-image-repeat

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi