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>
solved Need css for half filled circle with complete border