CSS

📏 CSS Tutorial: border-image-width

📌 Introduction

The border-image-width property in CSS controls how thick the border image appears around an element. It is part of the border-image system, which allows you to use images or gradients as borders. While border-image-slice determines how the image is cut,border-image-width defines how much space the image occupies. Mastering this gives you precision when designing decorative frames, patterned borders, and custom UI components. 🎨

🎯 What Does border-image-width Do?

Controls the thickness of each side of the border image 📏
Can be defined in numbers, percentages, or auto values 🔢
Works together with border and border-image-slice
Can set different widths for each side independently

✨ Syntax

Syntax

selector {
  border-image-width: <number> | <percentage> | <length> | auto;
}

Note

You must also define border-width and border-style for the border image to render.

🧩 Accepted Values

1. Number (unitless)

Multiplies the border-width value. Example: if border-width: 10px and border-image-width: 2 → final border image width = 20px.

Number Example

.box {
  border-width: 10px;
  border-style: solid;
  border-image-width: 2; /* becomes 20px */
}

2. Length (px, rem, etc.)

You can set the border image width explicitly.

Length Example

border-image-width: 25px;

3. Percentage

Relative to the size of the corresponding slice region of the image.

Percentage Example

border-image-width: 50%;

4. auto

Automatically adjusts based on the sliced image area.

Auto Example

border-image-width: auto;

🧩 Multiple Values (Per Side)

You can define up to four values in TRBL order (top → right → bottom → left).

Multiple Sides

/* top | right | bottom | left */
border-image-width: 10px 15px 20px 25px;

🔥 How border-image-width Works with border-image-slice

The slice defines which portion of the image is used. The width defines how much area it occupies. Both must be coordinated for a proper border image.

Full Example

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

Further details can be found at: https://dummyimage.com/900x220/eeeeee/000000&text=border-image-width+illustration

🔥 Practical Examples

1. Simple Decorative Frame

Decorative Frame

.frame {
  border: 30px solid transparent;
  border-image-source: url("decor.png");
  border-image-slice: 40;
  border-image-width: 30px;
}

2. Scaled Border Image

Scaled Example

.scaled-border {
  border: 12px solid transparent;
  border-image-source: url("pattern.png");
  border-image-slice: 20;
  border-image-width: 3; /* 3 × 12px = 36px */
}

3. Per-Side Border Thickness

Different Sides

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

4. Percentage Based Border Width

Percentage Width

.percent {
  border: 15px solid transparent;
  border-image-source: url("texture.png");
  border-image-slice: 30;
  border-image-width: 50%; /* half the slice width */
}

5. Auto Border Width

Auto Width

.auto-border {
  border: 18px solid transparent;
  border-image-source: url("fancy.png");
  border-image-slice: 45;
  border-image-width: auto;
}

📊 Summary Table

Value Type	Meaning
Number	Multiplies border-width
Length	Explicit width (px/rem/etc.)
Percentage	Relative to slice size
Auto	Browser decides based on image slice
4 Values	Set border width for each side

🖼️ Visual Demo

Further details can be found at: https://dummyimage.com/900x250/eeeeee/000000&text=border-image-width+demo

>>“The border-image system is powerful — mastering width gives your designs control and polish.” ✨

🎉 Conclusion

The border-image-width property controls how much space the image border occupies around your element. Whether using unitless multipliers, fixed lengths, or percentages, it gives you full flexibility in shaping artistic and decorative borders. Combine with border-image-slice, border-image-source,border-image-repeat, and border-image-outset for complete creative control. 🚀