border-image-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

La propriété CSS border-image-width définit la largeur de l'image de bordure d'un élément.

Exemple interactif

Si la valeur de cette propriété est supérieure à border-width, la bordure imagée s'étendra au-delà du remplissage (padding) voire du contenu.

Syntaxe

css
/* Valeur avec un mot-clé */
border-image-width: auto;

/* Longueur */
/* Type <length> */
border-image-width: 1rem;

/* Valeur proportionnelle */
/* Type <percentage> */
border-image-width: 25%;

/* Valeur numérique */
/* Type <number> */
border-image-width: 3;

/* côtés verticaux | horizontaux */
border-image-width: 2em 3em;

/* haut | côtés horizontaux | bas */
border-image-width: 5% 15% 10%;

/* haut | droit | bas | gauche */
border-image-width: 5% 2em 10% auto;

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

La propriété border-image-width est définie avec une, deux, trois ou quatre valeurs parmi celles de la liste qui suit.

  • Lorsqu'une valeur est utilisée, c'est cette valeur qui est utilisée pour les quatre côtés
  • Lorsque deux valeurs sont utilisées, la première s'applique aux côtés haut et bas et la seconde aux côtés gauche et droit
  • Lorsque trois valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas.
  • Lorsque quatre valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté haut, droit, bas et gauche (dans le sens horaire).

Valeurs

<length-percentage>

Une longueur (<length>) ou un pourcentage (<percentage>) 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.

Définition formelle

Valeur initiale1
Applicabilitétous les éléments sauf les éléments de table internes 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
Valeur calculéecomme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animationby computed value type

Syntaxe formelle

border-image-width = 
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

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

Exemples

Réaliser un pavage avec une image de bordure

Dans cet exemple on crée une image de bordure en utilisant le fichier ".png" suivant, qui mesure 90 pixels par 90 pixels :

Chaque cercle sur l'image a un diamètre de 30 pixels.

HTML

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>

CSS

css
p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}

Résultat

Spécifications

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-width

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi