How to make a circle with a border that has a color transition in CSS?

Question

I have this code:

<div id="circle" style="
            width: 500px;
            height: 500px;
            border-color: gold;
            border-style: solid;
            border-bottom-style: none;
            border-left-style: none;
            border-radius: 50%;
            background-color: transparent;
            position: absolute;
        ">
</div>

that creates this image:

How do I make the border have a gradient (e.g. going from gold to black to red)? I need to keep the center transparent so using a div inside another div isn't really an option

This may help: https://stackoverflow.com/questions/51496204/border-gradient-with-border-radius — 001, Aug 24 '23 at 16:16
This is a duplicate of [How to do gradient borders in CSS](https://stackoverflow.com/questions/2717127/how-to-do-gradient-borders-in-css) and of [Possible to use border-radius together with a border-image which has a gradient?](https://stackoverflow.com/questions/5706963/possible-to-use-border-radius-together-with-a-border-image-which-has-a-gradient) and more — TylerH, Aug 25 '23 at 13:06

Roko C. Buljan · Accepted Answer · 2023-08-24T21:41:34.027

2

Use a gradient background-image from transparent (#0000) to gold (#fd0) at 45 degrees
Clip (mask) the gradient image with a circle using CSS mask-image:

body { background-color: #232425; } /* Just for proof of concept */

.circle {
  --strokeWidth: 4px; /* change line thickness as desired */
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: linear-gradient(45deg, #0000 30%, #fd0 100%);
  -webkit-mask-image: radial-gradient(circle farthest-side at center, #0000 calc(100% - var(--strokeWidth) - 1px), #fff calc(100% - var(--strokeWidth)));
}

<div class="circle"></div>

This way your body's background colors or image will be visible thanks to the masking method.

To create a gradient as you requested (after your image) - which goes from gold to black to red and back to gold — you could use conic-gradient like:

body { background-color: #232425; } /* Just for proof of concept */

.circle {
  --strokeWidth: 4px; /* change line thickness as desired */
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: conic-gradient(#fd0 0%, #000 25%, #f00 50%, #fd0 100%);
  -webkit-mask-image: radial-gradient(circle farthest-side at center, #0000 calc(100% - var(--strokeWidth) - 1px), #fff calc(100% - var(--strokeWidth)));
}

<div class="circle"></div>

edited Aug 24 '23 at 21:41

answered Aug 24 '23 at 18:21

Roko C. Buljan

196,159
39
305
313

@qwerty_99 you're welcome. Had to post this answer and reopen your question since the [related answers using border-image](https://stackoverflow.com/a/6441510/383904) do not support border-radius. (as mistakenly closed by TylerH) – Roko C. Buljan Aug 24 '23 at 21:31
1

@qwerty_99 also as well just now noticed the requirement gold-black-red-gold and edited accordingly. – Roko C. Buljan Aug 24 '23 at 21:41
I was able to adapt it to the colors I need it, but thanks a lot – qwerty_99 Aug 24 '23 at 23:12
@RokoC.Buljan It was not a mistake. It is a duplicate. There is also this one https://stackoverflow.com/questions/5706963/possible-to-use-border-radius-together-with-a-border-image-which-has-a-gradient and I'm sure others. We should point users to existing resources instead of duplicating content on Stack Overflow. – TylerH Aug 25 '23 at 13:08
1

@TylerH indeed after a second look there are answers [over there](https://stackoverflow.com/questions/5706963/possible-to-use-border-radius-together-with-a-border-image-which-has-a-gradient) that do provide an answer to OP's question I was not able to find at the time of writing. Thank you. Closed. – Roko C. Buljan Aug 26 '23 at 17:45

Moob · Answer 2 · 2023-08-24T17:35:23.150

Gradient borders do not exist as a thing in their own right. I can't find a way to have a decent border gradient and a transparent background but if you can compromise one of the following might suffice.

EDIT: I've just noticed your requirement for the gradient to go gold/black/red so option one below is out (but I've kept it because its actually not a bad effect).

#demo {background:#eee;display:flex;gap:10px;}
.circle {
    --border-width: 5px;
    display:flex; justify-content:center; align-items:center;
    position:relative;
    width: 200px;
    height: 200px;
}
.attempt1 {
    border:var(--border-width) solid gold;
    border-bottom-style: none;
    border-left-style: none;
    border-radius: 50%;
    background-color: transparent;
}
.attempt1:before {
    content: "";
    position:absolute;
    inset:calc(0px - var(--border-width));    
    border-radius: 50%;
    border:var(--border-width) solid red;
    border-top-style: none;
    border-right-style: none;
}

.attempt2 {
    border:var(--border-width) solid transparent;
    border-radius: 50%;
    background-color: transparent;
    background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, gold, black, red) border-box;
}

<div id="demo">
<div class="circle attempt1">Transparent BG<br>but naff border</div>
<div class="circle attempt2">Solid BG but good border</div>
<div>

How to make a circle with a border that has a color transition in CSS?

2 Answers2