CSS border-image-width Property

The CSS border-image-width property defines the width of the border image.

The border-image-width property is one of the CSS3 properties.

It can have from one to four values - top, right, bottom, and left sides.

We can use one, two, three, or four values. If one value is defined, it applies the same width to all four sides. If two values are defined, the first one applies to the top and bottom, the second to the left and right. If three values are defined, the first one applies to the top, the second to the left and right, and the third to the bottom. If four values are defined, the widths apply to the top, right, bottom, and left as in a clock. It means if the fourth value is omitted, it is the same as the second. If the third one is omitted, it is the same as the first. If the second one is omitted, it is the same as the first.

Initial Value	1
Applies to	All elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.borderImageWidth = "20px";

Syntax

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

Example of the border-image-width property:

<!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>

Try it Yourself »

Result

Here is another example where you can see what will be changed if one, two, three or four values are used.

Example of the border-image-width property with different values:

<!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>

Try it Yourself »

Values

Value	Description	Play it
length	A length unit (px) that defines the size of the border-width.	Play it »
number	The border width is defined as a multiple of the corresponding border-width. It must not be negative, and default value is 1.	Play it »
percentage	Is calculated in relation to the width of border image area for horizontal offsets and the height of the border image area for vertical offsets.	Play it »
auto	Border width is made equal to the intrinsic width or height of the corresponding border-image-slice.	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.