La propriété border-image permet de dessiner 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

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

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 :
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

16

7 -webkit-

12

12 -webkit-

151 2 3 4

3.5 -moz- 5

44 -webkit- 6

11

10.5

11 -o-

6

3 -webkit-

optional <border-image-slice> ? ?15 ? ? ?
fill keyword Oui ?15 ? ?6
<gradient> Oui ?29 Oui Oui Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple2.1 -webkit- ?

Oui

Oui -webkit-

151 2 3 4

4 -moz- 5

44 -webkit- 6

11 -o-

6

3.2 -webkit-

?
optional <border-image-slice> ? ? ?15 ? ? ?
fill keyword18 ? ?15 ?6 ?
<gradient> Oui ? ?29 Oui Oui ?

1. Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).

2. Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).

3. From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809).

4. Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).

5. An earlier version of the specification was implemented, prefixed, in Firefox versions prior to 15.

6. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, teoli, pl6025, FredB, PetiPandaRou, openjck, Jeremie
Dernière mise à jour par : SphinxKnight,