Kevin Powell - Community•4mo ago

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

Stroudy•4mo ago

Tok124 (CSS Nerd)•4mo ago

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

Tok124 (CSS Nerd)•4mo ago

https://www.youtube.com/watch?v=ypstT5UfCsk

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...

Tok124 (CSS Nerd)•4mo ago

Then you probably need to also set a width for your border

Stroudy•4mo ago

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 😦

Tok124 (CSS Nerd)•4mo ago

It should be border-image-slice:1;

.container {
  padding: 16px;
  background-color:transparent;
  margin: 20px;
  width: 50%;
  border-radius:20px;
  border:10px solid red;
  border-image: linear-gradient(red, green);
  border-image-slice:1;
}

.container {
  padding: 16px;
  background-color:transparent;
  margin: 20px;
  width: 50%;
  border-radius:20px;
  border:10px solid red;
  border-image: linear-gradient(red, green);
  border-image-slice:1;
}

Stroudy•4mo ago

Still cant get it to work i feel like something is stopping it from working that works

Tok124 (CSS Nerd)•4mo ago

Yeah 🙂 Also, i dont think border-image can follow border-radius if im not mistaken But let me test 🙂 Yeah. it doesnt work

Stroudy•4mo ago

Yeah confirmed i just tried it aswell 😄

Tok124 (CSS Nerd)•4mo ago

Yeah xD

Stroudy•4mo ago

I still cant figure out why my code was not working tho

Tok124 (CSS Nerd)•4mo ago

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 10px

Stroudy•4mo ago

Man i love you thank you so much for clearing that up i really appreciate it :d ❤️

Tok124 (CSS Nerd)•4mo ago

But you can probably achieve the same result using gradient and mask, then the border-radius would work too 🙂 No problem 🙂

Stroudy•4mo ago

Tok124 (CSS Nerd)•4mo ago

Looking great ! 😄

clevermissfox•4mo ago

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

capt_uhu•4mo ago

you could partially get the border-radius on the border-image by adding clip-path: inset(0 round 20px);

Gaming

Programming

CSS border-image