Border-image linear-gradient

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

Thank you!
Anna

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

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.