border-image

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 initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitépour chaque propriété individuelle de la propriété raccourcie :
. 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 :
Animablenon
Ordre canoniquel'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.

Étiquettes et contributeurs liés au document

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