Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

border-image-source - Propriété CSS

border-image-source

Résumé des caractéristiques de la propriété border-image-source

Description rapide
Définit l'image utilisée pour construire la bordure.
Statut
Standard
Type de valeur
Image | Dégradé
Valeurs prédéfinies
none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété border-image-source passe d'une valeur à l'autre sans transition. Voir cependant le cas particulier de certains navigateurs.
Module W3C
Module CSS - Arrière-plans et bordures
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

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:
Schéma syntaxique de la propriété CSS border-image-sourceSyntaxe de border-image-source, spécification d'une image pour une bordure. none none image image gradient gradient
;
  • 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.

border-image-source :

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.

1
border-image-source
Estimation de la prise en charge en pourcentage du parc actuel.
95%

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.

Propriétés.

Résumé des propriétés de l'arrière-plan.
Mode de défilement de l'image d'arrière-plan.
Définit l'étendue de l'arrière-plan, en particulier par rapport à la bordure et aux marges intérieures..
Définit la couleur de l'arrière-plan.
Image d'arrière-plan.
Position de l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan dans le sens horizontal.
Définit comment se positionne l'image d'arrière-plan dans le sens vertical.
Définit comment est répété l'image d'arrière-plan.
Dimensionnement de l'image d'arrière-plan.
Propriété résumée qui définit l'ensemble des paramètres des bordures.
Définit le rayon de l'angle arrondi en bas à gauche.
Définit le rayon de l'angle arrondi en bas à droite.
Définit la couleur des bordures.
Résumé des propriétés des bordures réalisées avec des images.
Définit le débordement de l'image de bordure.
Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue..
Définit comment l'image de bordure est découpée.
Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.
Rayon des angles arrondis.
Type de bordure (simple, double, pointillé...).
Définit le rayon de l'angle arrondi en haut à gauche.
Définit le rayon de l'angle arrondi en haut à droite.
Définit l'épaisseur de la bordure de l'élément.
Applique un effet d'ombrage sur les blocs.