border-image-width - Propriété CSS
Résumé des caractéristiques de la propriété border-image-width
De une à quatre valeurs peuvent être précisées.
auto
1
border-image-width
passe progressivement d'une valeur à une autre.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:
;
- 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-width
qui est l'épaisseur de la bordure standard, etborder-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.
- 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.
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.
border-image-width
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.