Border-image-width - Propriété CSS
Résumé des caractéristiques de la propriété border-image-width
auto1border-image-width passe progressivement d'une valeur à une autre.Schéma syntaxique de border-image-width.
border-image-widthCliquez 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 :
lengthest une valeur numérique suivie d'une unité de dimension.%est un pourcentage calculé par rapport à la taille de la zone de bordure.numberest 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.
Syntaxes 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 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 pasborder-widthqui est l'épaisseur de la bordure standard, etborder-image-widthqui 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-outseta 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.
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.
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.
pour des bordures
border-image-widthNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Historique 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 2002Document de travail.
17 Décembre 2009Candidat à 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 :