Need css for half filled circle with complete border

Question

I want css for half filled circle with round border.

enter image description here

Answer 1

This is how you can achieve it in CSS.

.wrapper{
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 3px solid black;
  overflow: hidden;
}

.one{
  display: inline-block;
  background-color: green;
  height: 100px; width:50px;
  border-right: 2px solid black;
}

.two{
  display: inline-block;
  background-color: white;
  height: 100px; width:50px;
}

<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
</div>