Border-image-source - Propriété CSS
Résumé des caractéristiques de la propriété border-image-source
nonenoneborder-image-source passe d'une valeur à l'autre sans transition. Voir cependant le cas particulier de certains navigateurs.Schéma syntaxique de border-image-source.
Légende des termes du schéma ci-dessus :
imageest une image, spécifiée par l'une des fonctions reconnues par CSS :url(),image(),image-set(),cross-fade(),stripes(),element()gradientest un dégradé de couleurs, défini par l'une des fonctions connues de CSS :conic-gradient(),linear-gradient(),radial-gradient(),repeating-conic-gradient(),repeating-linear-gradient(),repeating-radial-gradient()
Description de la propriété border-image-source.
border-image-source définit l'image qui sera utilisée pour construire la bordure.
Pour une présentation générale de l'utilisation d'images dans les bordures, reportez-vous à la propriété résumée border-image.
Syntaxes pour border-image-source.
- border-image-source: none;
Valeur par défaut. Aucune image ne sera utilisée pour la bordure.
- border-image-source: url(...); border-image-source: image(...); border-image-source: image-set(...);
L'image spécifiée sera utilisée pour la construction de la bordure. De nombreuses syntaxes permettent de spécifier l'image : reportes-vous aux fonctions
url(),image(),image-set. - border-image-source: linear-gradient(...); border-image-source: radial-gradient(...); border-image-source: conic-gradient(...); border-image-source: repeating-linear-gradient(...); border-image-source: repeating-radial-gradient(...); border-image-source: repeating-conic-gradient(...);
La bordure sera construite à partir d'un dégradé. Reportez vous aux fonctions de dégradé pour plus de précision sur les syntaxes :
conic-gradient(),linear-gradient(),radial-gradient(), et pour les dégradés répétitifs :repeating-conic-gradient(),repeating-linear-gradient(),repeating-radial-gradient()
Valeurs globales
(communes à toutes les propriétés)
border-image-source: initial (none)
border-image-source: inherit
border-image-source: revert
border-image-source: revertLayer
border-image-source: unset
Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.
Animation de la propriété border-image-source.
La propriété border-image-source peut être animée. La norme prévoit un passage d'une image à l'autre sans transition
mais certains navigateurs ajoutent un effet de fondu entre les images. C'est le cas de Google Chrome ou Microsoft Edge par exemple.
Simulateur.
Prise en charge par les navigateurs.
La propriété border-image-source et les autres propriétés relatives aux images de bordure sont
prises en charge depuis 2015 à 2017 suivant les navigateurs.
pour des bordures
border-image-sourceNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Historique de la propriété border-image-source.
-
Module CSS - Arrière-plans et bordures - Niveau 3
Introduction des bordures réalisées avec une image, à la place de simples tracés, et des propriétés correspondantes, dontborder-image-width.
02 Août 2002Document de travail.
17 Décembre 2009Candidat à la recommandation.
Voir aussi : autres caractéristiques des bordures et arrière-plans.
Les propriétés relatives aux bordures, et plus particulièrement aux bordures-image sont décrites dans la spécification du W3C dénommée CSS Backgrounds and Borders Module.