This content originally appeared on Go Make Things and was authored by Go Make Things
Today, I wanted to show you how you can use gradients for borders in CSS—something that historically required faux borders and background colors, but is now supported natively.
Let’s dig in!
The border at the top of the page
My website typically has a gray border at the top…
body {
border-top: 0.5em solid #808080;
}But for Pride Month, I decided to swap it out with the Progress Pride Flag colors this year.
In years past, this effect has required hiding the border, and then adding a <div> element with a gradient background color…
<div class="border"></div>.border {
background: #808080;
background: linear-gradient(
to right,
#ffafc7 10%,
#73d7ee 10% 20%,
#613915 20% 30%,
#000000 30% 40%,
#e50000 40% 50%,
#ff8d00 50% 60%,
#ffee00 60% 70%,
#028121 70% 80%,
#004cff 80% 90%,
#760088 90%
);
height: 0.5em;
}Here, I’m defining a linear-gradient() that goes to the right. I like the to format better than degrees. I find it more human-readable.
Then, I define each of the 10 colors in the flag.
The numbers after each color are stops. They define where the color should start and stop along the gradient. By having each color start where the previous one left off, I end up with hard lines and no colors bleeding together.
If I omit the percentages, the colors blend together evenly across the gradient.
.border-blend {
background: #808080;
background: linear-gradient(
to right,
#ffafc7,
#73d7ee,
#613915,
#000000,
#e50000,
#ff8d00,
#ffee00,
#028121,
#004cff,
#760088,
);
height: 0.5em;
}Here’s a demo with both examples.
Using gradients for borders
With modern CSS, you can now apply gradients to borders using the border-image property.
Going back to my default border…
body {
border-top: 0.5em solid #808080;
}I can take the background gradient we used in the previous example and apply it as the value of the border-image property instead.
This is a shorthand property, and also requires a border-image-slice value of 1.
body.border-lgbtq {
--border-color: linear-gradient(
to right,
#ffafc7 10%,
#73d7ee 10% 20%,
#613915 20% 30%,
#000000 30% 40%,
#e50000 40% 50%,
#ff8d00 50% 60%,
#ffee00 60% 70%,
#028121 70% 80%,
#004cff 80% 90%,
#760088 90%
);
border-image: var(--border-color) 1;
}Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-06-03T14:30:00+00:00) Gradient borders with CSS. Retrieved from https://www.scien.cx/2025/06/03/gradient-borders-with-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.