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 fait partie des propriétés CSS3.

Elle peut prendre de une à quatre valeurs correspondant aux côtés haut, droit, bas et gauche.

Nous pouvons utiliser une, deux, trois ou quatre valeurs. Si une seule valeur est définie, elle s'applique aux quatre côtés. Si deux valeurs sont définies, la première s'applique au haut et au bas, la seconde à la gauche et à la droite. Si trois valeurs sont définies, la première s'applique au haut, la seconde à la gauche et à la droite, et la troisième au bas. Si quatre valeurs sont définies, les largeurs s'appliquent respectivement au haut, à la droite, au bas et à la gauche, comme sur une horloge. Cela signifie que si la quatrième valeur est omise, elle est identique à la seconde. Si la troisième est omise, elle est identique à la première. Si la seconde est omise, elle est identique à la première.

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

Syntaxe

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

css

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

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("https://fr.w3docs.com/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>

Try it Yourself »

Résultat

CSS border-image-width Property

Voici un autre exemple où vous pouvez voir ce qui change selon l'utilisation d'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

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("https://fr.w3docs.com/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("https://fr.w3docs.com/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("https://fr.w3docs.com/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("https://fr.w3docs.com/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>

Try it Yourself »

Valeurs

Valeur	Description	Tester
length	Une unité de longueur (px) qui définit la taille de la border-width.	Jouer »
number	La largeur de la 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.	Jouer »
percentage	Est calculée par rapport à la largeur de la zone de l'image de bordure pour les décalages horizontaux et à la hauteur de la zone de l'image de bordure pour les décalages verticaux.	Jouer »
auto	La largeur de la bordure est égale à la largeur ou hauteur intrinsèque de la border-image-slice correspondante.	Jouer »
initial	Définit la propriété à sa valeur par défaut.	Jouer »
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 largeur de la bordure d'une image.Elle vous permet de définir l'image qui servira de bordure.Elle permet d'agrandir ou de réduire la zone border-image et accepte 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 à l'aide d'images.

Propriété CSS border-image-width ​

Syntaxe ​

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

Résultat ​

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

Valeurs ​