Skip to content

Instantly share code, notes, and snippets.

Last active March 25, 2024 03:22
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;
Copy link


Copy link

I landed here looking for how to create a rounded square purely within a background-image property, so for the few who are still looking and made it this far, here you are:

Copy link

DIEGOHORVATTI commented Jan 22, 2022

Mina arigatō!

The other way really using borders

  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to right, darkblue, darkorchid) 1;

Copy link

Musab-Al-omari commented Jan 30, 2022

  1. write tow divs the border-div and the content-div
  2. give the content-div fix width and height
  3. give the border-div the same width and height plus twice border size ==>// in my example i add 8 to the border-div because I want 4px border
  4. center the content-div
  5. border-radius to make it circle
 <div class=" border-div">
      <div class="content-div" ></div>
  display: flex;
  justify-content: center;
  align-items: center;

  width: 208px;
  height: 208px;
  background: linear-gradient(red,yellow);
  border-radius: 50%; 
  width: 200px;
  height: 200px;
  background: blue;
  border-radius: 50%;


New Bitmap Image asd

Copy link


Copy link


Copy link

God bless your soul

Copy link

kkobzar commented Sep 22, 2022

nice solution! thanks

Copy link

thank you so much!!!

Copy link

Thank you!

Copy link

Thank you

Copy link

uxmauro commented Dec 17, 2022

Awesome! Thank you!

Copy link

Tu gères mze !

Copy link

nefzina commented Jan 11, 2023

Thank you ! 👍 

Copy link

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

Copy link

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

Copy link

ozzlems commented Mar 21, 2023

thank you so much

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.

Copy link

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

Copy link

Nice, here's another one that helped me too.

Copy link

polRk commented May 20, 2023

Bad. It doesnt supports transparent background

Copy link

Omi98 commented May 31, 2023

This saved my day! Thank you!!!

Copy link

Muito Bom!!

Copy link

has any way to fix this problem?

Copy link

@polRk has any way to fix this problem?

Copy link

To the point. Thanks:)

Copy link

Thank you!!!! Helps a lot

Copy link

Thanks for the help

Copy link

Thank you!! saved my day

Copy link

baby5 commented Mar 25, 2024

good job!

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