Border-image linear-gradient

HTML-CSS
1

Hi,

I’m struggling with creation of linear gradient border using border-image property. It just inserts a tiny border on the sides of the page instead of creating a solid top line of my footer. Please see a picture and a link to project below. Can someone please explain to me why this is happening?

https://codepen.io/AnnaxT/pen/VwpmVJm

2021-05-26_11-56-00
2021-05-26_11-56-002454×1116 221 KB

Thank you!
Anna

2

Hi, here is what I did in the footer selector that seems to have done the trick:

border-style:solid;
border-width:10px 0 0 0;
border-image: linear-gradient(90deg,purple, red) 1;

see here for effect: https://codepen.io/bill-ye/pen/NWpvxWN