CSS

🔪 CSS Tutorial: border-image-slice

📌 Introduction

The border-image-slice property determines how the image used in a border is divided into sections (top, right, bottom, left). It is one of the most important parts of the border-image system because slicing decides how the border appears around the element. Border images allow you to create decorative, patterned, or artistic borders using images or gradients. 🎨

🎯 What Does border-image-slice Do?

Controls how much of the image becomes the border 🖼️
Defines slicing from each side (top → right → bottom → left) ✂️
Works with border-image-source to generate border regions
Allows a fill keyword to fill the center area

✨ Syntax

Syntax

selector {
  border-image-slice: top right bottom left fill?;
}

Note

You MUST set a visible border for border-image to work:border: 20px solid transparent;

🧩 Values Accepted

1. Numbers (pixels without px)

Specifies offsets from the respective sides.

Numeric Slice

border-image-slice: 30;       /* applies to all sides */
border-image-slice: 30 40;  /* top/bottom 30, right/left 40 */
border-image-slice: 30 40 50 60; /* TRBL format */

2. Percentages

Slice relative to the image size.

Percentage Example

border-image-slice: 20%;

3. fill Keyword

Fills the center area of the element with the rest of the image instead of leaving it empty.

Fill Example

border-image-slice: 40 fill;

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

🔥 How Slicing Works

Think of slicing an image into 9 parts (like a tic-tac-toe grid). The 4 corner pieces fill the corners of the border. The top/side/bottom slices stretch or repeat to form the sides.

1 slice → all four sides use same slice
2 slices → top/bottom & right/left
3 slices → top, right/left, bottom
4 slices → TRBL independently

🔥 Practical Examples

1. Decorative Frame

Frame Example

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

2. Different Slices Per Side

Custom Slices

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

3. Using Percentage Slices

Percentage

.percent {
  border: 15px solid transparent;
  border-image-source: url("pattern.png");
  border-image-slice: 20% 10%;
}

4. Filling the Center Area

Fill Inside

.fill {
  border: 25px solid transparent;
  border-image-source: url("texture.png");
  border-image-slice: 30 fill;
}

5. Gradient Border Slice

Gradient Border

.gradient {
  border: 20px solid transparent;
  border-image-source: linear-gradient(90deg, #ff4e50, #f9d423);
  border-image-slice: 1;
}

📊 Summary Table

Input	Meaning
30	All sides sliced 30px from edge
30 40	Top/bottom = 30, sides = 40
20 30 40 50	TRBL slicing individually
30%	Slice relative to image dimension
40 fill	Slices 40px & fills center area

🖼️ Visual Demo

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

>>“Master the slice, and you master the art of decorative CSS borders.” ✨

🎉 Conclusion

The border-image-slice property is the key to controlling how image borders are constructed. By adjusting slice values, you control how much of the image is used and how the border looks on each side. Combine it with border-image-source, border-image-repeat,border-image-width, and border-image-outset to build stunning border designs. 🚀