gradient border on bottom of a div (HTML/CSS)

[Flanelman]

Hey guys so I've given this a google and there's a few examples, some I found didn't work and some were top->bottom but I didn't understand the code enough to change the direction because there was no explicit left/right/top/bottom etc.

So pretty much I want to add a border to my header div that starts out light on the left and right, and gets dark at the middle, I would be very grateful if someone could help me out with this! Thanks in advance.

[Cruorzy]

This might help a bit, not specifically a border. But might be a "other" solution

https://codepen.io/anon/pen/CqApt

 

[leonfagan71]

9 hours ago, Flanelman said:

Hey guys so I've given this a google and there's a few examples, some I found didn't work and some were top->bottom but I didn't understand the code enough to change the direction because there was no explicit left/right/top/bottom etc.

So pretty much I want to add a border to my header div that starts out light on the left and right, and gets dark at the middle, I would be very grateful if someone could help me out with this! Thanks in advance.

Here's some CSS from StackOverflow which seems to do what you want to do but it's inverted.
 

/* gradient shining border */
    border-style: solid;
    border-width: 3px;
    -webkit-border-image: -webkit-linear-gradient(
        left,
        rgba(0,0,0,1) 1%,
        rgba(0,255,255,1) 50%,
        rgba(0,0,0,1) 100%
    ) 0 0 100% 0/0 0 3px 0 stretch;
    -moz-border-image: -moz-linear-gradient(
        left,
        rgba(0,0,0,1) 1%,
        rgba(0,255,255,1) 50%,
        rgba(0,0,0,1) 100%
    ) 0 0 100% 0/0 0 3px 0 stretch;
    -o-border-image: -o-linear-gradient(
        left,
        rgba(0,0,0,1) 1%,
        rgba(0,255,255,1) 50%,
        rgba(0,0,0,1) 100%
    ) 0 0 100% 0/0 0 3px 0 stretch;
    border-image: linear-gradient(
        to left,
        rgba(0,0,0,1) 1%,
        rgba(0,255,255,1) 50%,
        rgba(0,0,0,1) 100%
    ) 0 0 100% 0/0 0 3px 0 stretch;

Just change the rgba values.

 

Regards,
Leon.