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

<'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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 16
Support complet 16
Support complet 7
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 15
Notes
Support complet 15
Notes
Notes Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).
Notes Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).
Notes 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).
Notes Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).
Support complet 3.5
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes An earlier version of the specification was implemented, prefixed, in Firefox versions prior to 15.
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
IE Support complet 11Opera Support complet 10.5
Support complet 10.5
Support complet 11
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari Support complet 6
Support complet 6
Support complet 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 2
Préfixée
Support complet 2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android ? Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 15
Notes
Support complet 15
Notes
Notes Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).
Notes Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).
Notes 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).
Notes Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).
Support complet 4
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes An earlier version of the specification was implemented, prefixed, in Firefox versions prior to 15.
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
Opera Android Support complet 11
Préfixée
Support complet 11
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari iOS Support complet 6
Support complet 6
Support complet 3.2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android ?
optional <border-image-slice>Chrome ? Edge ? Firefox Support complet 15IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 15Opera Android ? Safari iOS ? Samsung Internet Android ?
fill keywordChrome Support complet OuiEdge ? Firefox Support complet 15IE ? Opera ? Safari Support complet 6WebView Android Support complet OuiChrome Android ? Edge Mobile ? Firefox Android Support complet 15Opera Android ? Safari iOS Support complet 6Samsung Internet Android ?
<gradient>Chrome Support complet OuiEdge ? Firefox Support complet 29IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android ? Edge Mobile ? Firefox Android Support complet 29Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Étiquettes et contributeurs liés au document

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