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-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
Type de valeur
Dimension+ | Décimal+ | Pourcentage+
De une à quatre valeurs peuvent être précisées.
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)
Statut du document:: CRD (document proposé pour la recommandation)

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.

Syntaxes pour border-image-width.

length est une valeur numérique suivie d'une unité de dimension.
% est un pourcentage.
number est un nombre sans unité.
Cette syntaxe peut être répétée de une à quatre fois.

border-image-width:
Schéma syntaxique de la propriété border-image-widthSyntaxe de border-image-width, propriété CSS pour définir l'épaisseur d'une bordure-image. auto auto length length % % number number {1,4} {1,4}
;
  • 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 CSS 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.

    Border-image-width avec une valeur
    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.
    Border-image-width avec deux valeurs
    Lorsque trois valeurs sont précisées, elles sont attribuées aux bords conformément au schéma ci-dessous.
    Border-image-width avec trois valeurs
    Enfin, lorsque quatre valeurs sont indiquées, elles s'occupent respectivement des bords haut, droit, bas et gauche.
    Border-image-width avec quatre valeurs
  • border-image-width: initial; border-image-width: inherit; border-image-width: revert; border-image-width: revert-layer; border-image-width: unset;

    La valeur initiale est : 1.

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.

Manipulation de la propriété border-image-width par programme.

L'élément ci-dessous est doté d'une bordure-image. Vous pourrez voir instantanément sur l'affichage l'effet des modifications de la valeur la propriété border-image-width.

Modifier la valeur de border-image-width en 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.


function setBorderImageWidth(el) {
el.style['border-image-width']='1cm';
// ou
el.style.borderImageWidth='1cm';
}

Lire en Javascript la valeur de border-image-width.

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.


function getBorderImageWidth(el) {
alert(el.style['border-image-width']);
// ou
alert(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.


function getCalcBorderImageWidth(el) {
alert(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 (border-image-width).


function setBorderImageWidth(el) {
$(el).css('border-image-width','25%');
// ou
$(el).css('borderImageWidth','25%');
}

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.


function getCalcBorderImageWidth(el) {
alert($(el).css('border-image-width'));
// ou
alert($(el).css('borderImageWidth'));
}

Simulateur.

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 :

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.

1
border-image-width
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-width.

Les spécifications CSS éditées par le W3C sont organisées en modules. border-image-width 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'image utilisée pour construire la bordure.
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.