CSS rounded corners with gradient border

gistfile1.txt

.rounded-corners-gradient-borders {
  width: 300px;
  height: 80px;
  border: double 4px transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Thanks for the help

Thank you!! saved my day

good job！

Nice, here's another one that helped me too. https://dev.to/afif/border-with-gradient-and-radius-387f

@elitedevstudios
Thank you so much! This is the only example I found where the inner background can be transparent (using a mask-image). Exactly what I need :)

Nice, here's another one that helped me too. https://dev.to/afif/border-with-gradient-and-radius-387f

@elitedevstudios
This article has been very helpful to me, thanks a bunch!

Thank you! So much!

Nice, here's another one that helped me too. https://dev.to/afif/border-with-gradient-and-radius-387f

The "mask" is not supported in all browsers

nice