La propriété border-image-source définit l'image (type <image>) qu'on souhaite utiliser pour mettre en forme la bordure à la place du style. Si la valeur de cette propriété vaut none, ce sera la mise en forme définie par la propriété border-style qui sera utilisée.

/* Pas de border-image, on utilise border-style */
border-image-source: none;

/* image.jpg est utilisée comme image */
border-image-source: url(image.jpg);

/* un gradient est utilisé comme image */
border-image-source: linear-gradient(to top, red, yellow);

/* Valeurs globales */
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;
Note : Bien que n'importe quelle valeur de type <image> puisse être utilisée avec cette propriété CSS, la prise en charge des navigateurs est encore limitée et certains ne prennent en charge que les images définies avec la notation fonctionnelle url().

Valeur initialenone
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
Médiavisuel
Valeur calculéenone ou l'image avec son URI rendue absolue
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Valeurs

none
Cette valeur permet d'indiquer qu'aucune image ne doit être utilisée pour la bordure. Ce sera le style défini par la propriété border-style qui sera utilisé.
<image>
Une référence vers l'Image qu'on souhaite utiliser pour dessiner la bordure.

Syntaxe formelle

none | <image>


<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>


<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>


<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )


<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?
<length-percentage> = <length> | <percentage>

Exemples

Voir la page de la propriété raccourcie border-image et les différents exemples.

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-image-source' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple15 Oui1511156
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple ? ? Oui15 Non ? ?

Étiquettes et contributeurs liés au document

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