css shapes - 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 the border need to be in different colors.

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

<div class="test"></div>