border-image-width

La propriété border-image-width définit la largeur de la bordure imagée en exprimant des longueurs depuis le contour de la boîte de bordure vers l'intérieur de l'élément. Si border-image-width est supérieur à border-width, la bordure imagée s'étendra au-delà du padding voire du contenu.

Valeur initiale1
Applicabilitétous les éléments sauf les éléments de table lorsque border-collapse vaut collapse. S'applique aussi à ::first-letter.
Héritéenon
Pourcentagesse rapporte à la largeur ou la hauteur de la zone de l'image de bordure
Médiavisuel
Valeur calculéecomme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* border-image-width :             */
/* une valeur pour les quatre côtés */
border-image-width: 3;

/* border-image-width :               */
/* Première valeur : côtés verticaux  */
/* Seconde valeur : côtés horizontaux */
border-image-width: 2em 3em;

/* border-image-width :                */
/* Première valeur : côté haut         */
/* Deuxième valeur : côtés horizontaux */
/* Troisième valeur : côté bas         */
border-image-width: 5% 15% 10%;

/* border-image-width :           */
/* Première valeur : côté haut    */
/* Deuxième valeur : côté droit   */
/* Troisième valeur : côté bas    */
/* Quatrième valeur : côté gauche */
border-image-width: 5% 2em 10% auto;

/* Valeurs globales */
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;

Valeurs

<length-percentage>
Une longueur ou un pourcentage représentant la largeur de la bordure. Cette longueur peut être absolue (ex. px) ou relative (ex. rem). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides.
<number>
Représente un multiple de la valeur calculée de la propriété border-width de l'élément. Les valeurs négatives sont considérées invalides.
auto
L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété border-image-slice correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de border-width qui sera utilisée à la place.
inherit
Un mot-clé qui indique que les quatre valeurs sont héritées des valeurs calculées pour la propriété de l'élément parent.

Syntaxe formelle

[ <length-percentage> | <number> | auto ]{1,4}


<length-percentage> = <length> | <percentage>

Exemples

CSS

p {
 border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
 border-image-slice: 30;
 border-image-width: 20px;
 border-image-repeat: round;
 padding: 40px;
}

HTML

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
  no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-image-width' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 15.0 13.0 (13.0) (Oui) 11 15 6
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile
Support simple ? 13.0 (13.0) (Oui) Pas de support ? ?

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, FredB, PetiPandaRou
 Dernière mise à jour par : SphinxKnight,