Is it possible to somehow apply a gradient to a border ?

It is desirable something simpler, if this of course is ...

  • Doesn't border-color work with a gradient? - pepel_xD

1 answer 1

Here is one of the options:

 div { border-width: 3px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%; } 
 <div style="width: 50px; height: 50px; background: #eee"></div>

taken from CSS tricks

There are many alternatives.

  • Saw this option ... But I heard that it does not work at border-radius. - Andrei