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