Propriété CSS border-image-width

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

La propriété border-image-width peut avoir d'une à quatre valeurs - les côtes supérieure, droit, inférieure et gauche.

On peut utiliser une, deux, trois ou quatre valeurs. S'il y a une valeur définie, elle aplique la même largeur pour tous les quatre côtes.

S'il y a deux valeur définies, la première s'applique aux côtes supérieure et inférieure, la deuxième s'applique aux côtes droit et gauche.

S'il y a trois valeurs définies, la première s'applique au supérieure, la deuxième aux droit et gauche, et la troisième à l'inférieure.

S'il y a quatre valeurs définies, les largeurs s'appliquent au supérieure, droit, inférieure, et droit en ordre horaire. Cela signifie, que si la quatrième valeur est omise, elle est la même que la deuxième. Si la troisième est omise, elle est la même que la première. Si la deuxième est omise, elle est la même que la première.

Valeur initiale	1
Appliquée à	Tous les éléments, à l'exception des éléments de tableau interne, quand border-collapse est collapse. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.borderImageWidth = "20px";

Syntaxe

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

Exemple

<!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>Exemple de border-image-width</h1>
    <p class="border">Ici border-image-width est définie 20px.</p>
  </body>
</html>

Essayez-vous-même!

Voici un autre exemple, où on peut voir ce qui sera changé, si on utilise une, deux, trois ou quatre valeurs.

Exemple

<!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>Exemple de border-image-width </h1>
    <p class="border1">Ici la border-image-width est définie 20px.</p>
    <p class="border2">Ici la border-image-width est définie  20px et 10px.</p>
    <p class="border3">Ici la border-image-width est définie 20px, 10px et 40px.</p>
    <p class="border4">Ici la border-image-width est définie  20px, 10px, 40px et 55px.</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
length	Unité de longueur, qui définie la taille de border-width.
number	La largeur de la bordure est définie comme multiple de border-width corréspondant. Ça ne doit pas être négative, et la valeur par défaut est 1.
percentage	Cela est calculé en relation de la largeur de la zone de l'image de bordure pour les offsets horizontals et de la hauteur de la zone de l'image de bordure pour les offsets vérticals.
auto	La largeur de la bordure est fait égale à la largeur de l'intrinsèque ou hauteur de border-image-slice corréspondant.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.