CSS border-image-slice Property

What You’ll Learn

The border-image-slice property divides a border image into nine regions — four corners, four edges, and a center — so the browser can map each part to the element border.

Definition and Usage

The border-image-slice CSS property controls how a source image is divided before it is applied as a border. Inset lines are drawn from the top, right, bottom, and left edges of the image, creating nine slices that map to the element’s corners, sides, and optional center.

This property is essential for decorative border artwork. Without slicing, the whole image cannot be reused as a scalable frame. With the right slice values, corners stay crisp while edge sections repeat or stretch along each side.

The Nine-Slice Grid

📝 Syntax

border-image-slice accepts one to four inset values and an optional fill keyword:

selector {
  border-image-slice: <number> | <percentage>;
}

/* with fill keyword */
selector {
  border-image-slice: 30 fill;
}

Basic Example

.box {
  width: 300px;
  height: 200px;
  border: 10px solid transparent;
  border-image-source: url("border-image.png");
  border-image-slice: 25%;
}

Syntax Rules

• One value applies the same inset from all four sides of the source image.
• Two values set vertical insets first, then horizontal insets.
• Three values set top, horizontal sides, then bottom.
• Four values follow top, right, bottom, left order.
• The optional fill keyword keeps the center slice visible inside the element.

Default Value

The default value of border-image-slice is 100%. That means the inset lines sit at the outer edges of the image, so the full image is used without cutting inward from the sides.

💎 Property Values

Common Value Types

border-image-slice vs related properties

Examples Gallery

Try border-image-slice with percentages, numbers, the fill keyword, and per-side values.

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

<div class="box">
  Content inside the box
</div>

.frame {
  border: 10px solid transparent;
  border-image: url("/images/apple.png") 30 round;
}

.box {
  border: 10px solid transparent;
  border-image-source: linear-gradient(to bottom, #2563eb 30%, #fef08a 30% 70%, #7c3aed 70%);
  border-image-slice: 25%;
  background: #fff;
}

/* keep the center slice visible */
.box.with-fill {
  border-image-slice: 25% fill;
}

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

💡 Best Practices