CSS border-image-slice Property

CSS border-image-slice Property

The border-image-slice property in CSS divides a border image into 9 regions (4 corners, 4 edges, and the middle part). It determines how much of the image is used for the border.

1. Syntax

selector {
  border-image-slice: value;
}

✅ This property must be used with border-image-source for the image to appear.

2. Accepted Values

Value	Description	Example
number	Pixels or relative units to slice the image	border-image-slice: 30;
%	Percentage of the image size	border-image-slice: 20%;
fill	Fills the center of the border	border-image-slice: 30 fill;

3. Example – Basic Border Image Slicing

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

✅ The image is sliced into 30-pixel sections.

4. Example – Using fill to Fill the Middle

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

✅ The center of the border is also filled.

5. Example – Different Values for Each Side

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

✅ Order of values (clockwise):

1. Top → 10px

2. Right → 20px

3. Bottom → 30px

4. Left → 40px

6. Using border-image Shorthand

Instead of writing separate properties, use the shorthand:

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

✅ This is equivalent to:

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

7. Best Practices

✔ Always use border-image-source, or border-image-slice won’t work.
✔ Use fill when you want the middle of the image to be part of the border.
✔ Experiment with different slicing values for a better effect.