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 répétée

On découpe l'image et on la répète pour remplir la zone entre les bordures.

CSS

#repeat { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}

HTML

<div id="repeat">
  L'image est répétée pour remplir l'espace.
</div>

Résultat

Utiliser une image matricielle répétée arrondie

L'option round est une variation de repeat qui permet de connecter les parties de la bordure de façon lisse.

CSS

#round { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}

HTML

<div id="round">
  L'image est répétée pour remplir la zone.
</div>

Résultat

Utiliser une image matricielle étirée

Ici, on choisit l'option stretch pour étirer les images et remplir la zone entre les bordures.

CSS

#stretch { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}

HTML

<div id="stretch">
  L'image 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 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45), les images SVG sans dimension n'étaient pas découpées correctement (bug 619500. À partir de cette version, elles sont affichées de la même façon que les images SVG dimensionnées bien que si les tranches ne mesurent pas exactement 50%, elles sont étirées incorrectement (bug 1264809).

[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, mib_6025, FredB, PetiPandaRou, openjck, Jeremie
 Dernière mise à jour par : SphinxKnight,