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() ou src(), 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.

Autres propriétés relatives aux bordures images.

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: revert-layer; border-image-source: revert-rule; border-image-source: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, revert-rule, 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.

Accéder à la propriété border-image-source par programme.

Avec Javascript, modifier la valeur de border-image-source.

En Javascript, voici comment modifier la valeur de border-image-source. On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['border-image-source'] = "url('image.png')"; // ou let el = document.getElementById('id'); el.style.borderImageSource = "url('image.png')";

Avec Javascript, lire la valeur de border-image-source.

La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['border-image-source']; // ou let el = document.getElementById('id'); let value = el.style.borderImageSource;

Avec Javascript, lire la valeur calculée de border-image-source.

La valeur calculée est celle qui résulte de la conversion des chemins relatifs en chemins absolus, et de la prise en compte éventuelle des valeurs héritées.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('border-image-source');

Avec JQuery, lire ou modifier la valeur de border-image-source.

JQuery est une libraire Javascript. qui autorise souvent des syntaxes plus courtes que Javascript lui même.


// Lire la valeur :
$('#id').prop('border-image-source');
// Écrire la valeur :
$('#id').prop('border-image-source', "url('image.png')");
$('#id').prop('{border-image-source': "url('image.png')"});


Avec JQuery, lire la valeur calculée de border-image-source.

let value = $('#id').css('border-image-source');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS. Ils concernent tous la manipulation des styles CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété border-image-source et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de border-image-source. On constate en particulier que les chemins sont convertis en absolus.

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

  Le niveau 3 de la spécification décrit en plus comment positionner le fond par rapport à la zone d'arrière-plan, et comment le découper.
  Concernant les bordures, la notion de bordure image est introduite, ainsi que la notion d'arrondi d'angle et d'ombrage de boîte.

  Concernant border-image-source 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.

  

  

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 module CSS - Arrière-plans et bordures.

Propriétés :