CSS border-image
Why cant i get
border-image: linear-gradient(red,green); to work but border: solid red; does, What could be causing it to do this?
18 Replies
I have not used border-image very much. But as far as i can remember, you need border-image-slice to get the border-image to work. kevin also have a video about border-image
Kevin Powell
YouTube
The border property you never knew you needed
The border-image property is a blast from the past for anyone who had to make buttons with round corners on them back in the 2000s, but these days we can use it for fun gradient effects too!
🔗 Links
✅ Mozilla border image generator: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
⌚ Timestamp...
Then you probably need to also set a width for your border
Hey dude, thank you for responding I really appreciate it, I just tried ' border-image-slice: var(--gradient-color);
border-width: 100px;' Still no luck 😦
It should be border-image-slice:1;
Still cant get it to work i feel like something is stopping it from working
that works
Yeah 🙂
Also, i dont think border-image can follow border-radius
if im not mistaken
But let me test 🙂
Yeah. it doesnt work
Yeah confirmed i just tried it aswell 😄
Yeah xD
I still cant figure out why my code was not working tho
From the beginning it was because you didnt have border-image-slice and also probably because you were missing border-width.
you had
border:solid red;
i changed it to
border:10px solid red;
so now it has a border-width of 10pxMan i love you thank you so much for clearing that up i really appreciate it :d ❤️
But you can probably achieve the same result using gradient and mask, then the border-radius would work too 🙂
No problem 🙂
Looking great ! 😄
You can also use a pseudo element to create a “pseudo border” if you want to apply border-radius to it bc as you see, border-radius doesn’t work with border image
you could partially get the
border-radius on the border-image by adding clip-path: inset(0 round 20px);