Border-image-slice CSS Property For One-of-a-kind Border Effects

The border-image-slice CSS property allows us to be extremely creative with our borders. We can cut (slice) a source, such as an image with a nice pattern or a gradient, into pieces so it can stretch or repeat those slices around an element’s border. We specify how far in from each edge the slicing occurs and those slices are sketched to be the border areas (edges and corners).

Outline of the border-image-slice CSS property

Let’s see our property more analytically. First, you pick a visual source and then decide where to “slice” it. After that, CSS uses those pieces to sketch the border. Kind of like cutting a picture into a nine-patch grid and placing it around a box.
We have 4 corners, 4 sides, and the main content. Only 8 of them actually showed up and used for borders, the corners and the sides. The 9th slice, which is the main part of the element, is optional and it usually carries our content.

A few critical points about those pieces:

• Corners: Depending on the value, they may not stretch (value 1), they just sit there like little anchors, or they may stretch (higher or more values).
• Sides: Stretch or repeat, depending on your border settings. They control most of the visual essence.
• Center: The middle part usually isn’t drawn as part of the border at all—it’s ignored unless you explicitly choose to fill it.

Practical examples: How border-image-slice works

To better understand how this property works, we first need to insert an image with a width and height of 400px.
Next, we’ll apply properties like object-fit: cover, background-size: cover, and background-position: center to keep the image centered and fully visible without distortion.
🔖 These properties are only here so we can clearly see the image at this stage — they aren’t required for the next steps.
Finally, we add the source of our image.

<div class="image"></div>

<div class="image"></div>

.image {
  width: 300px;
  height: 300px;
  
  object-fit: cover;
  background-position: center;
  background-size: cover;
  
  background-image:  url(https://images.unsplash.com/photo-1553526777-5ffa3b3248d8?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987);
}

.image {
  width: 300px;
  height: 300px;
  
  object-fit: cover;
  background-position: center;
  background-size: cover;
  
  background-image:  url(https://images.unsplash.com/photo-1553526777-5ffa3b3248d8?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987);
}

With our image set up, we can continue and see how border-image-slice handles different inputs.

This CSS property can take one to four values.
– One value: uses the same slice for every side.
– Two values: set the first for top and bottom, and the second for left and right.
– Three values: apply the first for the top, the second for both left and right and the third for the bottom.
– Four values: follow the standard CSS direction: top, left, bottom, right.
With so many options, there is plenty of room to create some trully great-looking border effects.

Setting the value: 1

Let’s start with value 1.
First, we need to add a 20px border but transparent. This gives us the space the image-based border will later occupy, without showing the standard solid border.

Then, we set border-image-slice to 1. In this way, the browser takes a very thin section, just one pixel wide, from each edge of the image and stretches it along the borders. As a result, we have only stripes.

.image {
  ...
  border: 20px solid transparent;
  border-image-slice: 1;
}

.image {
  ...
  border: 20px solid transparent;
  border-image-slice: 1;
}

Setting one value

We continue following the same tactic, but this time instead of 1 we use a value of 100. By doing this, the browser cuts a 100-pixel-wide section from each edge of the image and uses those slices to form the new borders. In that way, we are closer to our initial image as we use a wider section of it.

.image {
  ...
  border: 20px solid transparent;
  border-image-slice: 100;
}

.image {
  ...
  border: 20px solid transparent;
  border-image-slice: 100;
}

Setting two values

Next, we will use two values, 1 100, to see how different slice sizes affect the borders. The first value (1) applies to both the top and bottom, creating thick slices, close to line-like borders. The second value (100) applies to both the left and right, creating wider slices that maintain more of the image’s details.

.image {
  ...
  border: 20px solid transparent;
  border-image-slice: 1 100;
}

.image {
  ...
  border: 20px solid transparent;
  border-image-slice: 1 100;
}

Setting three values

Moving forward, it’s time to see the results when using three values. The first value (150) applies to the top, the second value (80) to the left and right and finally the third value (5) to the bottom. As we can observe again, the higher the value, the closer to the image’s characteristics.

.image {
  ...
  border: 20px solid transparent;
  border-image-slice: 150 80 5;
}

.image {
  ...
  border: 20px solid transparent;
  border-image-slice: 150 80 5;
}

Setting four values

Our final option is to use four different values, one for each side of our element. The values apply in a clockwise direction – top, right, bottom, left. That creates an uneven but interesting border effect.

.image {
  ...
  border: 20px solid transparent;
  border-image-slice: 50 80 120 150;
}

.image {
  ...
  border: 20px solid transparent;
  border-image-slice: 50 80 120 150;
}

Playing with border-image-slice feels a bit like trimming a photo into fancy frames — every small tweak shifts the mood of the border in surprising ways.
What do you think? Are you ready to try it out yourself? Be my guest and have fun! 😃