CSS - circle border with various colors

Question

Does anybody know how to create this in CSS or if it\'s even possible. I know how to make quarter circles but I am not sure how to apply it in this format. Small chunks of t

Answer 1

You have already good answers.

Just to give you another way to get this result, you can do it with multiple backgrounds. The good news about this approach is that you only need a div for it.

.test {
  margin: 25px 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 12px solid transparent;
  background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), 
                    linear-gradient(30deg, red 36%, lightgrey 30%),
                    linear-gradient(120deg, yellow 36%, lightgrey 30%),
                    linear-gradient(300deg, blue 36%, lightgrey 30%),
                    linear-gradient(210deg, green 36%, lightgrey 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
  transform: rotate(30deg);
}

The sectors can be get with an inclined linear gradient, limited to one quarter of the space available. - we need 4 of these, changing the position and the angle.

Over those, another gradint, set fully to white, will hide the center.

And changing the background-origin and clip to border-box or content-box makes the colors use the space reserved for the border.

Note that this solution will work for any border / border-radius combination