border-image-source - Propriété CSS
Résumé des caractéristiques de la propriété border-image-source
none
none
border-image-source
passe d'une valeur à l'autre sans transition. Voir cependant le cas particulier de certains navigateurs.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
.
image
est une image, spécifiée par l'une des fonctions reconnues par CSS : url
, image()
, image-set()
, etc.
gradient
est un dégradé de couleurs, défini par l'une des fonctions connues de CSS : linear-gradient()
, radial-gradient()
, etc.
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()
- border-image-source:
initial
; border-image-source:inherit
; border-image-source:revert
; border-image-source:revert-layer
; border-image-source:unset
;La valeur initiale est :
.none
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.
border-image-source
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que border-image-source
.
Les spécifications CSS éditées par le W3C sont organisées en modules. border-image-source
fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.