[Go Make Things] Gradient borders with CSS

Tuesday, June 3, 2025

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;  }

Here's another demo.

Like this? A Go Make Things membership is the best way to support my work and help me create more free content.

Cheers,
Chris

Want to share this with others or read it later? View it in a browser.

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

.