How to create a border-top linear gradient

I learned something new today so I wanted to share!

I wanted to create a linear gradient border-top on a call out section on my blog.

My searches weren't bringing up the specific example I needed to make it work so I had to dig in deeper.

CSS-Tricks had the closest example in Gradient Borders in CSS (opens in a new tab). The third example is super close as it had two borders but they were on the sides and not the top. Me, fundamentally not understanding how border-image works, couldn't tinker with code pen to make it do what I wanted. I did try reading the MDN docs for border-image (opens in a new tab) but it just wasn't clicking for me. Finally, I took to Twitter where my friend Stephan saved me from myself:

https://twitter.com/Vanaf1979/status/1349050068670828547

Eureka! With Stephan's explanation, it finally clicked for me that border-image-slice (opens in a new tab) works in a quadrant system, kind of like margin and padding. In addition to Stephan's tweet, the syntax section on border-image-slice (opens in a new tab) is the bit that really helped lock it in for me.

• When one position is specified, it creates all four slices at the same distance from their respective sides.
• When two positions are specified, the first value creates slices measured from the top and bottom, the second creates slices measured from the left and right.
• When three positions are specified, the first value creates a slice measured from the top, the second creates slices measured from the left and right, the third creates a slice measured from the bottom.
• When four positions are specified, they create slices measured from the top, right, bottom, and left in that order (clockwise).

Here's what I landed on for my specific application.

.div {
  border-top: 3px solid;
  border-image: linear-gradient(to right,#f1f5f7,#d80b77) 1 0 0 0;
}

I hope this helps someone else who's searching "create border-top linear gradient". 😆

That's all for now. Thanks for reading!