border-image

La propriété border-image dessine une image sur la bordure d'un élément. C'est une propriété raccourcie qui permet de définir border-image-source, border-image-width, border-image-repeat, border-image-slice, border-image-outset.

Cela permet d'obtenir des effets de dessin complexes sans avoir à complexifier l'utilisation des boîtes CSS. La propriété border-image sera utilisée plutôt que le style défini via la propriété border-style. Selon la spécification, border-style doit être présente si border-image est utilisée.

Note : Si la valeur calculée de border-image-source vaut none (via border-image-source ou via la propriété raccourcie border-image), ce sera le style indiqué par border-style qui sera utilisé.

Syntaxe

/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

La propriété border-image peut être définie avec une à cinq valeurs parmi celles définies ci-après.

Note : Si la valeur calculée de border-image-source vaut none ou si l'image ne peut pas être affichée, c'est le border-style correspondant qui sera affiché.

Valeurs

border-image-source
L'image source. Voir border-image-source.
border-image-slice
La façon dont l'image est découpée en zones (jusqu'à 4). Voir border-image-slice.
border-image-width
La largeur de la bordure avec l'image. Voir border-image-width.
border-image-outset
La distance entre la bordure et le bord de l'élément. Voir border-image-outset.
border-image-repeat
La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voir border-image-repeat.

Syntaxe formelle

Exemples

Utiliser une image matricielle étirée

On découpe l'image et on la répète pour remplir la zone entre les bordures.

CSS

#bitmap {
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
}

HTML

<div id="bitmap">
  L'image est étirée pour remplir l'espace.
</div>

Résultat

Utiliser un dégradé

CSS

#gradient {
  border: 30px solid;
  border-image: linear-gradient(red, yellow) 10;
  padding: 20px;
}

HTML

<div id="gradient">
  L'image formée par le gradient est étirée pour remplir la zone.
</div>

Résultat

Accessibilité

Les technologies d'assistance ne peuvent pas analyser les images de bordure. Si l'image contient des informations essentielles au sens de la page, mieux vaut décrire ces informations dans le contenu sémantique du document.

Spécifications

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

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
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
Pourcentagespour chaque propriété individuelle de la propriété raccourcie :
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi