Border-image-source - Propriété CSS

(1) Voir cependant le cas particulier de certains navigateurs.

Schéma de la syntaxe de border-image-source.

Description des termes utilisés sur le schéma :

• image est une image, spécifiée par l'une des fonctions reconnues par CSS : url(), image(), image-set(), cross-fade(), stripes(), element()
• gradient est 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.

Valeurs 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()

• 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.

Exemple d'animation de 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.

Exemple interactif avec la propriété border-image-source.

Compatibilité des navigateurs avec border-image-source.

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.

Remarques :

(1) Supporte la propriété résumé mais pas les propriétés détaillées.

1

Utilisation d'images
pour des bordures

2

Propriété
border-image-source

Estimation de la prise en charge globale.

97%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

1

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire 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, dont border-image-width.
  

  02 Août 2002

  Document de travail.

  

  17 Décembre 2009

  Candidat à 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.

Propriétés :