“Fade” borders in CSS

Question

I\'m using border-left: groove on an element but I want the border to \"fade\" into the background as it\'s about to end at the bottom.

I hope I\'m mak

Answer 1

I know this is old but this seems to work well for me in 2020...

Using the border-image CSS property I was able to quickly manipulate the borders for this fading purpose.

Note: I don't think border-image works well with border-radius... I seen someone saying that somewhere but for this purpose it works well.

1 Liner:

CSS

 .bbdr_rfade_1      { border: 4px solid; border-image: linear-gradient(90deg, rgba(60,74,83,0.90), rgba(60,74,83,.00)) 1; border-left:none; border-top:none; border-right:none;  }

HTML

Oh I am so going to not up-vote this guy...