Skip to content

Instantly share code, notes, and snippets.

@stereokai
Last active May 22, 2024 11:42
Show Gist options
  • Save stereokai/36dc0095b9d24ce93b045e2ddc60d7a0 to your computer and use it in GitHub Desktop.
Save stereokai/36dc0095b9d24ce93b045e2ddc60d7a0 to your computer and use it in GitHub Desktop.
CSS rounded corners with gradient border
.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;
}
@Nassim-din
Copy link

Tu gères mze !

@nefzina
Copy link

nefzina commented Jan 11, 2023

Thank you ! 👍 

@kitanga-nday-bptn
Copy link

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

@PhilLeGoff
Copy link

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

@ozzlems
Copy link

ozzlems commented Mar 21, 2023

thank you so much

@rafaeltreiber
Copy link

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

@Joliwood
Copy link

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

@elitedevstudios
Copy link

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

@polRk
Copy link

polRk commented May 20, 2023

Bad. It doesnt supports transparent background

@Omi98
Copy link

Omi98 commented May 31, 2023

This saved my day! Thank you!!!

@DominiqueMaik3
Copy link

Muito Bom!!

@DesignHhuang
Copy link

has any way to fix this problem?

@DesignHhuang
Copy link

@polRk has any way to fix this problem?

@ismailhhridoy
Copy link

To the point. Thanks:)

@bedeschiotavia
Copy link

Thank you!!!! Helps a lot

@Nusry-Erabiz
Copy link

Thanks for the help

@CarlosDanielDev
Copy link

Thank you!! saved my day

@baby5
Copy link

baby5 commented Mar 25, 2024

good job!

@Fruup
Copy link

Fruup commented May 22, 2024

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment