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. 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.

Exemple interactif

Syntaxe

css

/* Valeur avec un mot-clé */
/* Ici, pas de border-image, */
/* on utilise border-style */
border-image-source: none;

/* Valeur de type <image> */
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

/* Valeurs globales */
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;

La propriété border-image-slice peut être utilisée afin de diviser une image source en régions qui seront insérées dynamiquement pour constituer la bordure imagée finale.

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. Voir <image>.

Définition formelle

Valeur initiale	`none`
Applicabilité	tous les éléments sauf les éléments de table internes lorsque `border-collapse` vaut `collapse`. S'applique aussi à `::first-letter`.
Héritée	non
Valeur calculée	`none` ou l'image avec son URI rendue absolue
Type d'animation	discrète

Syntaxe formelle

border-image-source = 
  none     |
  <image>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  url( <string> <url-modifier>* )  |
  src( <string> <url-modifier>* )

Exemples

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

Spécifications

Specification
CSS Backgrounds and Borders Module Level 3 # the-border-image-source

Compatibilité des navigateurs

BCD tables only load in the browser