border-radius on a border-image with linear-gradient
I have a small question about css that has bothered me for some time now. Does anyone know when it would be possible to have a border-radius on a border-image that is a linear-gradient by any chance?
6 Replies
CSS from the browser 🙂
.card-border-13px.card-green-gold-border {
border: 2px solid;
border-image: linear-gradient(90deg, green, gold);
border-image-slice: 1;
}
.card-border-13px {
border-radius: 13px;
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.45);
}
The trick is that the gradient isn't actually the border but instead the background, with a plain background placed inside the transparent border
You are awesome!
@z- ::theProblemSolver:: How do I mark this one solved? 🙂
Solution that worked for me without all the extra border/margin stuff in the example:
.card-border-13px {
border-radius: 13px;
&.card-green-gold-border {
border: 2px solid transparent;
background: linear-gradient(#fff 0 0) padding-box, linear-gradient(90deg, green, gold) border-box;
}
}
I think you click the ... and edit the post. I've never asked a question to actually know
You just add the solved tag, it's a separate menu option to edit the tags