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.
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.
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.
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.
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.
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.
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! 😃
Borders have long been one of the simplest tools in web design. Yet, that’s no reason to look boring. Combining the border-image-slice property with the power of CSS gradients, we can turn simple static lines into 🎨 colorful, eye-catching details that make your designs stand out. Besides, a playful border effect adds fun and energy to a page, helping shapes and sections feel more alive. No images needed, just blending colors with clean CSS. In other words, it’s a small touch that can make your design feel fresh and creative, adding personality and vibrance. 🌈 ✨
Border effect explanation setting linear-gradient
We’ll begin by creating a box with a 150px width and height that temporarily has a solid 5px black border. This is the box we’ll use to experiment with different gradient border effects and make it pop! 🥳
With our box in place, we can make things more interesting by replacing the simple black border with a color 🍭 splash of CSS gradients.
First, we need to add the transparent value to the border.
Next, we continue with the gradient. I decided to start with the linear-gradient and use three colors (magenta, cyan, orange). Feel free to use as many colors as you want.
In the final step, we set border-image-slice to 1. In that way, the browser uses the whole gradient evenly on all sides of the border.
The browser doesn’t know how to spread the gradient across the border area. Without the border-image-slice property, the gradient won’t appear at all. It is essential to add it as it will activate and display the gradient border.
It’s good to know that the border-image-slice property can take up to four values, each one responsible for how to cut (slice) the gradient we use as a border.
More analytically:
border-image-slice: 1; simply put the whole gradient eventually on all sides
border-image-slice: 20; it cuts 20 (px or percentages, depending on what you use) from each edge to make the border
border-image-slice: 20 30; the same as above but the first value is for top and bottom, the second for left and right
border-image-slice: 20 30 10; the first value is for top, the second for left and right and the third for bottom
border-image-slice: 20 30 10 5; finally, the first value is for top, the second for right, the third for bottom and the fourth for left
🔖 When we use a gradient, we usually just write 1 because a gradient isn’t a picture with pixels or edges to slice. It smoothly fills the space, so there’s nothing to “cut”. The value 1 simply tells the browser to use the whole gradient for the border.
More border effect ideas with linear-gradient technique and border-image-slice: 1
Below, I included a few more examples to help you see how changing the gradient can completely transform the look of a border, making the concept clearer and easier to follow. 😃
Flipping the colors: The reverse linear-gradient
Colorful linear gradients that flow from top to bottom or the reverse way are like creating amazing color bands that wrap around the box.
Color loops: The repeating linear-gradient technique
With repeating gradients, you can build patterns that literally look like an impressive dancing effect or all these amazing neon light effects. How cool is that!? 😎
Moreover, we are free to experiment with the other two (radial-gradient and conic-gradient) CSS gradients as well. So, let’s dive into some more examples and discover how different gradient ideas come to life.
Border effects with different border-image-slice values
Radial gradient for spinning border effects
Now, let’s see what would happen if we use the same gradient, in this case, the radial-gradient, with many different values on border-image-slice. For these examples, I used cyan, pink and violet. 🎨 ✨
In the first example, we maintain the value 1 while in the second, we replace it with a value of 50. The border-image-slice: 1; applies the entire gradient, spreading the colors smoothly around the border. With this transition, the gradient stays wide and soft.
The border-image-slice: 50; applies a small piece of the gradient. Since it’s using only a part of the gradient’s color range, the colors repeat more often and look like stripes that are spinning around.
To sum up, increasing the slice value tells the browser to take a smaller “slice” of the gradient and reuse it around the border. As a result, with a smaller slice, we have more repetition and eventually stronger striping.
Conic gradient for more complex border effect
Next, let’s see what would happen if we use the same gradient, in this case, the conic-gradient, but different values on border-image-slice. For these examples, I changed the colors and used black, orange, magenta, and black again. 🎨 ✨
🔖 A small detail to keep in mind is that starting and ending with the same color (in this case, black) helps to keep the transitions soft and seamless.
In this case, with a 1 value it uses almost the entire conic gradient around the border. The colors flow smoothly and evenly, creating a soft circular blend with gentle transitions.
On the other hand, with a value 30 it takes a smaller portion of the gradient and stretches it around the border. The border starts showing clearer color sections with mild curves and slight breaks at the corners.
Finally, with a value of 60 it uses a very small wedge of the conic gradient and repeats it. As a result, the border shows strong, repeating color bands or striped details, especially near the corners.
In this case, we use two values: 1 60. The result is a creative mix of two effects. The first value (1) applies to the top and bottom borders. Due to this we have a smooth and gentle look with wide color transitions. The second value (60) applies to both the left and right borders. Because of that, the effect is a tighter and more striped pattern as the gradient slice we use is smaller and repeated more often.
Our final example takes four values: 1 60 60 1. This setup makes our border appear acymatric, calm, and energetic at the same time. More analytically, the first value (1) is for the top border and uses almost the entire gradient. The second and the third values (60 60) are for the right and bottom borders and use a smaller slice (tighter pattern). While the last value (1) is for the left border and uses almost the entire gradient again. Due to these values, we have smooth and continuous top and right borders, while the bottom and left are striped.
The results we observe when utilizing these all these specific values above on the border-image-slice CSS property concerns only a box of 150 pixels in width and height. It is critical to adjust the values if you have different dimensions.
Take into consideration that gradients with the 1 value look better in square shapes, as the color flow fits perfectly within equal sides.
Experimenting with gradient borders opens the door to an endless palette of styles — from soft pastel outlines that frame content elegantly to bold, vibrant strokes that command attention. The key lies in balance: using color transitions and subtle motion to enhance, not overpower, the user experience. Whether you’re styling buttons, containers, or entire sections, CSS gradient borders are a reminder that even the smallest design detail can carry a playful spark — proof that borders don’t just separate elements, they can also bring them to life.
