Propriété CSS border-image-width

La propriété CSS border-image-width définit la largeur de l'image de bordure d'un élément — c'est-à-dire l'épaisseur avec laquelle la bordure basée sur une image est dessinée autour de la boîte. Elle fait partie des propriétés CSS3.

Quand l'utiliser

Vous n'avez besoin de border-image-width que lorsqu'un élément possède déjà une image de bordure définie avec border-image-source (et généralement border-image-slice). Utilisée seule, elle n'a aucun effet.

Un point important à retenir : border-image-width n'est pas la même chose que la propriété border-width classique. La propriété border-width ordinaire réserve de l'espace dans le modèle de boîte et influe sur la mise en page, tandis que border-image-width contrôle uniquement la largeur avec laquelle l'image est peinte dans la zone de bordure. Si vous rendez l'image plus large que la bordure réelle, elle peut déborder vers l'intérieur sur le rembourrage ou le contenu de l'élément sans déplacer les autres contenus. C'est pourquoi la plupart des exemples définissent d'abord une border transparente, puis dimensionnent l'image avec border-image-width.

Types de valeurs acceptées

La largeur de chaque côté peut être exprimée de plusieurs façons :

<length> — une taille fixe telle que 20px.
<number> — un multiplicateur de la border-width correspondante. border-image-width: 2 signifie « deux fois la largeur de bordure ». C'est le type utilisé par la valeur initiale 1.
<percentage> — relative à la taille de la zone d'image de bordure (les pourcentages horizontaux utilisent sa largeur, les verticaux sa hauteur).
auto — utilise la largeur/hauteur intrinsèque du border-image-slice correspondant, ou la border-width correspondante si aucune taille intrinsèque n'existe.

Nombre de valeurs à utiliser

border-image-width accepte une à quatre valeurs, en suivant la notation abrégée CSS standard dans le sens horaire :

Une valeur — s'applique aux quatre côtés.
Deux valeurs — la première est haut/bas, la seconde est gauche/droite.
Trois valeurs — la première est le haut, la deuxième est gauche/droite, la troisième est le bas.
Quatre valeurs — haut, droite, bas, gauche (dans le sens horaire depuis le haut).

Lorsqu'une valeur est omise, elle reflète le côté opposé : une quatrième valeur omise copie la deuxième (gauche = droite), une troisième omise copie la première (bas = haut), et une deuxième omise copie la première (une seule valeur s'applique donc à tout).

Valeur initiale	1
S'applique à	Tous les éléments, sauf les éléments de tableau internes quand border-collapse vaut collapse. S'applique également à ::first-letter.
Hérité	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.borderImageWidth = "20px";

Syntaxe

Syntaxe de la propriété CSS border-image-width

border-image-width: number | % | auto | initial | inherit;

Exemple de la propriété border-image-width :

Exemple de la propriété CSS border-image-width avec une valeur en px

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 20;
        border-image-repeat: round;
        border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Border-image-width Example</h1>
    <p class="border">Here the border-image-width is set to 20px.</p>
  </body>
</html>

Essayez vous-même »

Résultat

Voici un autre exemple qui illustre ce qui change selon qu'on utilise une, deux, trois ou quatre valeurs.

Exemple de la propriété border-image-width avec différentes valeurs :

Exemple de la propriété CSS border-image-width avec deux, trois et quatre valeurs

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px;
      }
      .border3 {
        border: 10px solid transparent;
        padding: 40px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px 40px;
      }
      .border4 {
        border: 10px solid transparent;
        padding: 55px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px 40px 55px;
      }
    </style>
  </head>
  <body>
    <h1>The border-image-width Example</h1>
    <p class="border1">Here the border-image-width is set to 20px.</p>
    <p class="border2">Here the border-image-width is set to 20px and 10px.</p>
    <p class="border3">Here the border-image-width is set to 20px, 10px and 40px.</p>
    <p class="border4">Here the border-image-width is set to 20px, 10px, 40px and 55px.</p>
  </body>
</html>

Essayez vous-même »

Dans l'exemple ci-dessus, .border1 utilise une seule valeur pour les quatre côtés, tandis que .border4 attribue une largeur différente à chaque côté — remarquez comment les côtés plus épais peignent davantage l'image vers l'intérieur.

Propriétés associées

border-image-source — définit l'image utilisée pour la bordure.
border-image-slice — découpe l'image source en neuf régions formant la bordure.
border-image-outset — pousse l'image de bordure au-delà de la boîte de bordure.
border-width — la largeur de bordure classique que border-image-width multiplie lorsqu'un <number> est utilisé.

Valeurs

Valeur	Description	Essayer
length	Une unité de longueur (px) qui définit la taille de la border-width.	Essayer »
number	La largeur de bordure est définie comme un multiple de la border-width correspondante. Elle ne doit pas être négative, et la valeur par défaut est 1.	Essayer »
percentage	Calculée par rapport à la largeur de la zone d'image de bordure pour les décalages horizontaux et à la hauteur de la zone d'image de bordure pour les décalages verticaux.	Essayer »
auto	La largeur de bordure est rendue égale à la largeur ou hauteur intrinsèque du border-image-slice correspondant.	Essayer »
initial	Définit la propriété à sa valeur par défaut.	Essayer »
inherit	Hérite la propriété de son élément parent.

Pratique

Que fait la propriété 'border-image-width' en CSS ?

Elle définit la propriété de largeur de la bordure d'une image.Elle permet de définir l'image qui sera utilisée comme bordure.Elle permet d'agrandir ou de réduire la zone d'image de bordure et possède quatre valeurs : haut, droite, bas et gauche.Elle définit l'image d'arrière-plan de la bordure.Elle permet de styliser les bordures avec des images.