Skip to content

Instantly share code, notes, and snippets.

@stereokai
Last active September 3, 2024 10:27
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;
}
@kerryj89
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: https://gist.github.com/kerryj89/e7983e1b5761a38e98cae5022802f03a

@DIEGOHORVATTI
Copy link

DIEGOHORVATTI commented Jan 22, 2022

Mina arigatō!

The other way really using borders

.rounded-corners-gradient-borders{
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to right, darkblue, darkorchid) 1;
}

@Musab-Al-omari
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>
    </div>
.border-div{
  display: flex;
  justify-content: center;
  align-items: center;

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

}

New Bitmap Image asd

@hecong-cac
Copy link

nice!

@ShahriarKh
Copy link

💎

@asenrusev
Copy link

God bless your soul

@kkobzar
Copy link

kkobzar commented Sep 22, 2022

nice solution! thanks

@vladislavaSim
Copy link

thank you so much!!!

@iguilhermeluis
Copy link

Thank you!

@Erraoudy
Copy link

Thank you

@uxmauro
Copy link

uxmauro commented Dec 17, 2022

Awesome! Thank you!

@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