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

<'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 AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
border-imageChrome 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 11
Support complet 11
Aucun support 10.5 — 15
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 Support complet 18
Support complet 18
Support complet 18
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
Support complet 11
Aucun support 11 — 14
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 Support complet 1.0
Préfixée
Support complet 1.0
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
fillChrome Support complet 16Edge Support complet 12Firefox Support complet 15IE Support complet 11Opera Support complet OuiSafari Support complet 6WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 15Opera Android Support complet OuiSafari iOS Support complet 6Samsung Internet Android Support complet 1.0
<gradient>Chrome Support complet 7Edge Support complet 12Firefox Support complet 29IE Support complet 11Opera Support complet OuiSafari Support complet 4WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 29Opera Android Support complet OuiSafari iOS Support complet 3.2Samsung Internet Android Support complet 1.0
optional <border-image-slice>Chrome Support complet 16Edge Support complet 12Firefox Support complet 15IE Support complet 11Opera Support complet 15Safari Support complet 6WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 15Opera Android Support complet 14Safari iOS Support complet 6Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet
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.

Voir aussi