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 importante : 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é.
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | pour chaque propriété individuelle de la propriété raccourcie :
::first-letter. |
| Héritée | non |
| Pourcentages | pour chaque propriété individuelle de la propriété raccourcie :
|
| Média | visuel |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Animable | non |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* image-source | slice | height | width | outset | repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;
Valeurs
border-image-source- Voir
border-image-source. border-image-slice- Voir
border-image-slice. border-image-width- Voir
border-image-width. border-image-outset- Voir
border-image-outset. border-image-repeat- 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
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. |
Compatibilité des navigateurs
| Fonctionnalité | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support simple | 3.5 (1.9.1)-moz[1] 15 (15)[2] |
7.0-webkit 16.0 |
11 | 10.5 / 11.0-o[3] 15.0 |
3.0-webkit 6.0 |
Paramètre optionnel <border-image-slice> |
15 (15) | ? | ? | ? | ? |
fill |
15 (15) | (Oui) | ? | Pas de support | 6 |
<gradient> |
29.0 (29.0) | (Oui) | (Oui) | (Oui) | (Oui) |
| Fonctionnalité | Android Browser | Firefox Mobile (Gecko) | iOS Safari | Opera Mini | Opera Mobile |
|---|---|---|---|---|---|
| Support simple | 2.1-webkit | 3.5 (1.9.1)-moz[1] 15 (15)[2] |
3.2 -webkit 6.0 |
Pas de support | 11.0-o |
paramètre optionnel <border-image-slice> |
? | 15.0 (15) | ? | Pas de support | ? |
fill |
18.0 | 15.0 (15) | 6 | Pas de support | Pas de support |
<gradient> |
(Oui) | 29.0 (29.0) | (Oui) | (Oui) | (Oui) |
[1] Pour les versions antérieures à Gecko 15 (Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12), c'est une ancienne version de la spécification qui était implémentée et préfixée.
[2] Jusqu'à Gecko 47.0 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44), les images SVG sans dimension n'étaient pas découpées correctement (bug 619500. À partir de Gecko 48 ((Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45)), elles sont affichées de la même façon que les images SVG dimensionnées, toutefois si les tranches ne mesurent pas exactement 50%, elles sont étirées incorrectement (bug 1264809). Cela a été corrigé avec Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) pour les images SVG dimensionnées, ce n'est pas encore corrigé pour les images SVG sans dimension lorsque e10s est désactivé (cf. bug 1284798).
De plus, les SVG de petite taille sont mal étirés car les valeurs de pourcentages appliquées à border-image-slice sont calculés avec des entiers plutôt qu'avec des nombres flottants (bug 1284797.
En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.
[3] Pour Opera, la propriété préfixée a été ajoutée après la version non-prefixée.