border-image-source

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.

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
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* 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;

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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<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}


<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> [ <percentage> | <length> ]?

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é Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 15.0 15.0 (15.0) 11 15 6
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? 15.0 (15.0) Pas de support ? ?

Étiquettes et contributeurs liés au document

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