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! 🥳
<div class="box"></div>.box {
width: 150px;
height: 150px;
border: 5px solid;
}
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-gradientand 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.
.box {
...
border: 5px solid transparent;
border-image: linear-gradient(magenta, cyan, orange);
border-image-slice: 1;
}
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.
.box {
...
border: 5px solid transparent;
border-image: linear-gradient(to top, magenta, cyan, orange);
border-image-slice: 1;
}
Smooth side-to-side color flow with linear-gradient
Colors travel from one side to the other, giving the border’s box a bright, balanced look.
Firstly, from left to right
.box {
...
border: 5px solid transparent;
border-image: linear-gradient(to right, magenta, cyan, orange);
border-image-slice: 1;
}
Then, from right to left
.box {
...
border: 5px solid transparent;
border-image: linear-gradient(to left, magenta, cyan, orange);
border-image-slice: 1;
}
Playing with diagonal directions
A diagonal direction gives the sense of a wavy, moving effect. Plus, changing the angle, you can create a more dynamic look.
.box {
...
border: 5px solid transparent;
border-image: linear-gradient(45deg, magenta, cyan, orange);
border-image-slice: 1;
}
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!? 😎
.box {
...
border: 5px solid transparent;
border-image: linear-gradient(45deg, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange, magenta, cyan, orange);
border-image-slice: 1;
}
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.
.box {
...
border: 5px solid transparent;
border-image: radial-gradient(cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet);
border-image-slice: 1;
}
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.
.box {
...
border: 5px solid transparent;
border-image: radial-gradient(cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet, cyan, pink, violet);
border-image-slice: 50;
}
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.
.box {
...
border: 5px solid transparent;
border-image: conic-gradient(black, orange, magenta, black);
border-image-slice: 1;
}
Conic-gradient with repeating pattern
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.
.box {
...
border: 5px solid transparent;
border-image: conic-gradient(black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta,black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black);
/* all around the same value */
border-image-slice: 1;
}
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.
.box {
...
border: 5px solid transparent;
border-image: conic-gradient(black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta,black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black);
/* all around the same value (30) */
border-image-slice: 30;
}
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.
.box {
...
border: 5px solid transparent;
border-image: conic-gradient(black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta,black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black);
/* all around the same value (60) */
border-image-slice: 60;
}
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.
.box {
...
border: 5px solid transparent;
border-image: conic-gradient(black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta,black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black);
/* top & bottom - left & right */
border-image-slice: 1 60;
}
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.
.box {
...
border: 5px solid transparent;
border-image: conic-gradient(black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta,black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black, orange, magenta, black);
/* top - right - bottom - left */
border-image-slice: 1 60 60 1;
}
Conic-gradient with color stops
Furthermore, we can control the color stops by using percentages, allowing us to decide exactly where the colors start and end each time.
.box {
...
border: 5px solid transparent;
border-image: conic-gradient(black 75%, orange 75%, magenta 80%, black 85%, black 90%, magenta 95%, orange 100%);
border-image-slice: 1;
}
.box {
...
border: 5px solid transparent;
border-image: conic-gradient(black 0%, black 5%, magenta 5%, magenta 10%, black 10%, black 15%, magenta 15%, magenta 20%, black 20%, black 25%, magenta 25%, magenta 30%, black 30%, black 35%, magenta 35%, magenta 40%, black 40%, black 45%, magenta 45%, magenta 50%, black 50%, black 55%, magenta 55%, magenta 60%, black 60%, black 65%, magenta 65%, magenta 70%, black 70%, black 75%, magenta 75%, magenta 80%, black 80%, black 85%, magenta 85%, magenta 90%, black 90%, black 95%, magenta 95%, magenta 100%);
border-image-slice: 1;
}
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.
Leave a reply