CSS border-image-width Property

What You’ll Learn

The border-image-width property controls how wide the sliced border image is painted on each side of an element.

Definition and Usage

The border-image-width CSS property sets the width of the border image area on each side. After a source image is sliced, this property decides how large those slices appear when painted as the element’s border.

It is a longhand of the border-image shorthand and gives you fine control over decorative borders. You can make a frame thicker or thinner independently of the element’s regular border-width, or let the width follow the slice artwork with auto.

Default vs Custom Width

📝 Syntax

border-image-width accepts one to four width values:

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

Basic Example

.border-box {
  width: 300px;
  height: 150px;
  border: 10px solid transparent;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 20px;
}

Syntax Rules

• One value applies the same width to all four sides.
• Two values set vertical sides first, then horizontal sides.
• Three values set top, horizontal sides, then bottom.
• Four values follow top, right, bottom, left order.
• A unitless number multiplies the corresponding border-width on that side.

Default Value

The default value of border-image-width is 1. As a unitless number, it acts as a multiplier of the element’s border-width on each side, so the border image width typically matches the reserved border area.

💎 Property Values

Common Value Types

border-image-width vs related properties

Examples Gallery

Try border-image-width with lengths, multipliers, auto, and per-side values.

<style>
  .border-box {
    width: 300px;
    height: 150px;
    border: 10px solid transparent;
    border-image-source: url("border.png");
    border-image-slice: 30;
    border-image-width: 20px;
  }
</style>

<div class="border-box"></div>

.frame {
  border: 8px solid transparent;
  border-image: url("/images/apple.png") 25 / 2 round;
  padding: 1rem;
  background: #fff;
}

.card {
  border: 10px solid transparent;
  border-image-source: url("/images/apple.png");
  border-image-slice: 30;
  border-image-width: auto;
  border-image-repeat: round;
  padding: 1rem;
  background: #fff;
}

.panel {
  border: 10px solid transparent;
  border-image-source: repeating-linear-gradient(45deg, #2563eb 0 8px, #fff 8px 16px);
  border-image-slice: 8;
  border-image-width: 6px 16px 6px 16px;
  border-image-repeat: round;
  padding: 1rem;
  background: #fff;
}

💡 Best Practices