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

This solution uses conic-gradient to draw the color stops, and mask-image with a linear gradient to remove the inner circle.

Note: right now it works only on Chrome, but you can check the current browsers' support at the links.

.target {
  width: 60vmin;
  height: 60vmin;
  background: conic-gradient(
    lightgrey 0deg 30deg,
    red 30deg 60deg,
    lightgrey 60deg 120deg,
    yellow 12deg 150deg,
    lightgrey 150deg 210deg,
    green 210deg 240deg,
    lightgrey 240deg 300deg,
    blue 300deg 330deg,
    lightgrey 330deg 360deg
  );
  -webkit-mask-image: radial-gradient(transparent 65%, black 65%);
  mask-image: radial-gradient(transparent 65%, black 65%);
  border-radius: 50%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100vh;
}