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

nice

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

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

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

}

nice!

💎

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！