Border-image-width - Propriété CSS

border-image-width

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

Description rapide

Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

auto

Pourcentages

Calculés par rapport aux dimensions de l'élément.

Valeur initiale

1

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété border-image-width passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Arrière-plans et bordures

Références (W3C)

CSS Backgrounds and Borders Module Level 3

Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de `border-image-width`.

Schéma syntaxique de la propriété border-image-width
Cliquez sur le schéma pour plus de détails sur les valeurs
Télécharger le schéma en SVG

Explication des termes du schéma ci-dessous :

length est une valeur numérique suivie d'une des unités de dimension.
% est un pourcentage calculé par rapport à la taille de la zone de bordure.
number est un nombre sans unité.
Cette syntaxe peut être répétée de une à quatre fois.

Description de la propriété `border-image-width`.

border-image-width définit la largeur de la bordure-image. Par ailleurs, elle redimensionne les images pour tenir dans cette épaisseur.

Pour une présentation générale des images dans les bordures, reportez-vous à la propriété résumée border-image. Et pour définir l'épaisseur d'une bordure classique (sans image), reportez-vous à la propriété border-width.

Valeurs pour `border-image-width`.

border-image-width: auto;

Valeur déterminée automatiquement par rapport aux dimensions de l'image utilisée pour la bordure.
border-image-width: 15px;

Lorsque la ou les valeurs sont exprimées avec une unité de dimension (voir les unités de dimension), elles définissent l'épaisseur de la bordure-image.
border-image-width: 1;

De une à quatre valeurs sans unité indiquent un multiple par rapport à la largeur de la bordure border-width. Ne confondez pas border-width qui est l'épaisseur de la bordure standard, et border-image-width qui est l'épaisseur de la bordure-image.
border-image-width: 10%;

De une à quatre valeurs exprimées en pourcentage. Les pourcentages sont calculés par rapport à la taille de la zone de bordure, qui est le plus souvent égale à celle de l'élément, sauf si border-image-outset a une valeur différente de zéro.
border-image-width: 10px 15px 10px 20px;

Lorsque plusieurs valeurs sont indiquées, séparées par des espaces, elles définissent l'épaisseur de chacune des bordures-image, avec les règles habituelles en CSS :

Si une seule valeur est précisée, elle s'applique à toutes les bordures.

Si deux valeurs sont précisées, la première gère les bords haut et bas, la deuxième les bords gauche et droite.

Lorsque trois valeurs sont précisées, elles sont attribuées aux bords conformément au schéma ci-dessous.

Enfin, lorsque quatre valeurs sont indiquées, elles s'occupent respectivement des bords haut, droit, bas et gauche.

Valeurs globales
(communes à toutes les propriétés)


border-image-width: initial  (1)
border-image-width: inherit
border-image-width: revert
border-image-width: revertLayer
border-image-width: unset

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Animation de la propriété `border-image-width`.

La propriété border-image-width peut facilement être animée. Il faut simplement faire attention à ne pas mixer de valeurs sans unité et des valeurs avec unité (pixels, pourcentages, etc) dans le directive @keyframes.

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

Modifier l'épaisseur d'une bordure image avec Javascript.

Deux variantes de codes Javascript pour modifier la valeur de border-image-width. La valeur peut être indiquée exactement comme en CSS : en pixels, en pourcentages, ou dans n'importe quelle autre unité de dimension.


	let el = document.getElementById('id');
	el.style['border-image-width'] = '1cm';
	// ou
	let el = document.getElementById('id');
	el.style.borderImageWidth = '1cm';

Lire l'épaisseur d'une bordure image avec Javascript.

Le code ci-dessous relit la valeur de la propriété border-image-width qui a été affectée directement via l'attribut style de l'élément (donc dans le code HTML). les valeurs affectées dans la feuille de styles via un sélecteur CSS ne sont pas prises en compte.


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

Lire la valeur calculée de `border-image-width` en Javascript.

La valeur calculée est celle qui résulte de la résolution de la cascade des héritages. A défaut, la valeur calculée est la valeur initiale de la propriété (1 dans le cas de border-image-width).

La caleur est retournée en pixels, quelque soit l'unité utilisée pour la définir. Cependant, les pourcentages sont conservés en l'état.


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

Modifier la valeur de la propriété `border-image-width` avec JQuery.

Comme en Javascript, il existe une syntaxe avec le nom de la propriété écrit en camel-case (borderImageWidth) et une autre syntaxe avec une notation en kebab-case.


 $('#id').css('border-image-width', '1cm');
 // ou
 $('#id').css('borderImageWidth', '1cm');

Lire la valeur calculée de la propriété `border-image-width` avec JQuery.

Comme en Javascript, la valeur est retournée en pixels ou en pourcentages.


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

Autres exemples.

Retrouvez d'autres exemples sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété border-image-width 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-width. On constate en particulier que les pourcentages sont bien mémorisés en tant que pourcentages. Toutes les autres unités sont converties en pixels.

Exemple interactif avec la propriété `border-image-width`.

Ce simulateur permet de choisir la valeur de la propriété border-image-width, les propriétés border-image-slice et border-image-source ayant été fixées respectivement à 10 et à un dégradé radial.

border-image-width :

auto

Prise en charge par les navigateurs.

La propriété border-image-width, ainsi que toutes les propriétés relatives aux images de bordure, sont prises en charge depuis 2015 à 2017 suivant les navigateurs.

Colonne 1

Possibilité d'utiliser des images pour construire des bordures et, donc, support de la propriété border-image.

Colonne 2

Support de la propriété border-image-width pour définir la largeur d'une bordure-image.

Remarques :

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

Utilisation d'images
pour des bordures

Propriété
border-image-width

Estimation de la prise en charge globale.

97%

96%

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

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

Caniuse

Histoire de la propriété `border-image-width`.

Module CSS - Arrière-plans et bordures - Niveau 3

Introduction des bordures réalisées avec une image, à la place de simples tracés.
Première définition de la propriété 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 aux arrière-plans sont décrites dans la spécification du W3C dénommée CSS Backgrounds and Borders Module. En voici la liste :