is it possible to create a border gradient with a border-radius and a transparent background?
This is a good tutorial to create a border gradient including border-radius. However it is not possible to set a transparent background. Is there any workaround to use a border gradient with a transparent background?
Thanks for answers!
if you want to make border look “transparent” then why use “border”?!
I want to make the background transparent and for the border I want to use a gradient color. When using a gradient color for the border then we need to set a background color on top of it. Just like in the tutorial I showed, but my question is, if there is a workaround use a gradient color for the border with a transparent color for the background?
The third version shown should work and the support isn’t that bad.
You can also use a combination of 1 and 2 but instead of a pseudo-element you use a wrapper element with the radius and a hidden overflow. It probably has some limitations and would be more finicky to set up.
border: 5px solid;
border-image: linear-gradient(45deg, purple, orange) 1;
Compare the two
Thank you again and again @lasjorg
I highly appreciate your support!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.