CSS: Circle with half one color and the other half another color?

Question

Is it possible to do something like this with CSS? Basically make half the circle one color and the other half another color?

Answer 1

A linear-gradient will do that, and use border-radius to make it a circle.

div {
  width: 50vw;
  height: 50vw;
  background: linear-gradient( -45deg, blue, blue 49%, white 49%, white 51%, red 51% ); 
  border-radius: 50%;
}

<div></div>

Answer 2

You can use :before and :after pseudo-elements for each half of circle and also add transform: rotate() on parent element.

.circle {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(25deg);
}
.circle:after, .circle:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 50%;
}
.circle:after {
  background: #02FBFD;
  left: -2px;
}
.circle:before {
  background: #FE0103;
  right: -2px;
}

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

Answer 3

You can do something like this:

div {
    border-radius: 50px;
    border-right-color: red;
    border-top-color: blue;
    border-bottom-color: red;
    border-left-color: blue;
    border-width: 50px;
    border-style: solid;
    height: 0px;
    width: 0px;
    }

<div>
</div>