border-image-source

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

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 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
Valeur calculéenone ou l'image avec son URI rendue absolue
Type d'animationdiscrète

Syntaxe formelle

border-image-source = 
  none     |
  <image>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

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

<src()> = 
  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

Voir aussi