How to make a CSS border gradient with transparent background?

[kazooi]

Hi there,

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!

[bappyasif]

if you want to make border look “transparent” then why use “border”?!

[kazooi]

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?

[lasjorg]

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.

<div class="radius">
  <div class="gradient-border-bg"></div>
</div>

body {
  background-color: #031016;
}

.radius {
  border-radius: 5px;
  overflow: hidden;
}

.gradient-border-bg {
  border: 5px solid;
  border-image: linear-gradient(45deg, purple, orange) 1;
  padding: 1rem;
}

Compare the two

gradient borders

[kazooi]

Thank you again and again @lasjorg

I highly appreciate your support!