CSS border-image-width Property

CSS border-image-width Property

The border-image-width property in CSS specifies the width of the border image. It determines how much space the border image will take up around an element.

1. Syntax

selector {
  border-image-width: value;
}

✅ Can be set using different units:

• Absolute units (px, em, rem, etc.)

• Percentage (%)

• Number (relative to border-image-slice)

• Auto (default width based on image size)

2. Accepted Values

Value	Description	Example
length	Specifies a fixed width in px, em, etc.	10px, 2em
%	Relative to the original border image size	50%
number	Relative to border-image-slice value	1, 2, 3
auto	Automatically adjusts to the border image size	auto

3. Example – Fixed Border Image Width

div {
  border: 20px solid;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 10px;
}

✅ The border image width is set to 10px.

4. Example – Using Percentage

div {
  border: 20px solid;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 50%;
}

✅ The border image width will be 50% of the border-image area.

5. Example – Using Auto

div {
  border: 20px solid;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: auto;
}

✅ The border image width adjusts automatically based on the image size.

6. Example – Different Widths for Each Side

You can specify different widths for each side:

div {
  border: 20px solid;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 10px 20px 30px 40px;
}

✅ Order of values (clockwise):

1. Top → 10px

2. Right → 20px

3. Bottom → 30px

4. Left → 40px

7. Using border-image Shorthand

Instead of writing separate properties, use the border-image shorthand:

div {
  border: 20px solid;
  border-image: url("border.png") 30 / 10px;
}

✅ This is equivalent to:

div {
  border: 20px solid;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 10px;
}

8. Best Practices

✔ Use border-image-width: auto; when unsure about the exact width.
✔ Use percentages (%) for responsive designs.
✔ Ensure border-image-slice is properly set, or border-image-width won’t work correctly.