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
/* 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-stylequi sera utilisé. <image>-
Une référence vers l'Image qu'on souhaite utiliser pour dessiner la bordure. Voir
<image>.
Syntaxe formelle
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. |
| 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 |
Compatibilité des navigateurs
BCD tables only load in the browser