X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS border-image-width Property

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

The border-image-width property 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

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

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

Example

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

Values

Value Description
length A length unit (px) that defines the size of the border-width.
number The border width is defined as a multiple of the corresponding border-width. It must not be negative, and default value is 1.
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.
auto Border width is made equal to the intrinsic width or height of the corresponding border-image-slice.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Related Resources

CSS border, border, border-image, border-width, width, border-collapse, border-image-slice.


Browser support

15.0+ 12.0+ 13.0+ 6.0+ 15.0+

Practice Your Knowledge

Which statement is incorrect about the border-image-width property?



Do you find this helpful?

Related articles