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?

2024-02-03_00_54_16-thunder.dk_mtg_setcodex_193.png

ThunderOP•2/2/24, 11:57 PM

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);
}

Zoë•2/3/24, 12:13 AM

https://codepen.io/z-/pen/KKERaOY?

CodePenZed Dash

Gradient on border radius for Thunder

...

Zoë•2/3/24, 12:13 AM

The trick is that the gradient isn't actually the border but instead the background, with a plain background placed inside the transparent border

ThunderOP•2/3/24, 12:13 AM

You are awesome!

ThunderOP•2/3/24, 12:23 AM

@z- ::theProblemSolver:: How do I mark this one solved?

ThunderOP•2/3/24, 12:24 AM

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;
}
}

Zoë•2/3/24, 12:34 AM

I think you click the ... and edit the post. I've never asked a question to actually know

Jochem•2/3/24, 8:52 AM

You just add the solved tag, it's a separate menu option to edit the tags