Is there a solution to remove the thin white outline on the upper half of this circle? Any suggestions are welcomed! JSFiddle Demo
body {
background-color: black;
padding:50px;
}
.square {
background-color: white;
margin-bottom: 20px;
height: 200px;
width: 200px;
overflow: hidden;
}
.halfSquare {
background-color: #462a04;
height: 100px;
width: 200px;
}
.circle {
background-color: white;
height: 200px;
width: 200px;
border-radius: 50%;
overflow: hidden;
}
.halfCircle {
background-color: #462a04;
height: 100px;
width: 200px;
}<body>
<div class="square"><div class="halfSquare"></div></div>
<div class="circle"><div class="halfCircle"></div></div>
</body>