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

God bless your soul

nice solution! thanks

thank you so much!!!

Thank you!

Thank you

Awesome! Thank you!

Tu gères mze !

Thank you ! 👍 

Yup, this is the one, change the border width to change the border width, very nice

Aight been on this for 1h thx man it looks really good!

thank you so much

Thanks a lot. I looked a lot for that and got just wrong answers. This was the only one that worked as I needed.

Wow, searched for a while to find an easy solution like that ! Thank you a lot

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

Bad. It doesnt supports transparent background

This saved my day! Thank you!!!

Muito Bom!!

has any way to fix this problem?

@polRk has any way to fix this problem?

To the point. Thanks:)

Thank you!!!! Helps a lot

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

next chalenge, transparent background ;)