Circle appear gap at edge - html

Question

I'm playing CSS battle and trying to achieve the result perfectly, but I don't know why there is some gap at the edge of the circle as you can see on the screenshot here: Screenshot
I know there is better solution like using gradient, but I'm trying to learn to solve the problem here and improve my understanding of CSS. Below is my code:
body {
background-color: #E3516E;
}
.Container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.Circle {
width: 199px;
height: 200px;
background-color: blue;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.Square {
width: 99.5px;
height: 100px;
position: absolute;
}
.Green {
background-color: #51B5A9;
}
.Yellow {
background-color: #FADE8B;
right: 0;
}
.White {
background-color: #F7F3D7;
bottom: 0;
left: 0;
}
.Transparent {
background-color: #E3516E;
bottom: 0;
right: 0;
}
<div class="Container">
<div class="Circle">
<div class="Green Square"></div>
<div class="Yellow Square"></div>
<div class="White Square"></div>
<div class="Transparent Square"></div>
</div>
</div>

Answer 1

There is no gap at edges. Looks like Anti-Aliasing. I have added a border to it, so that you can see there's no gap.
<div class="Container">
<div class="Circle">
<div class="Green Square"></div>
<div class="Yellow Square"></div>
<div class="White Square"></div>
<div class="Transparent Square"></div>
</div>
</div>
<style>
body {
background-color: #E3516E;
}
.Container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.Circle {
width: 199px;
height: 200px;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.Square {
width: 99.5px;
height: 100px;
position: absolute;
}
.Green {
background-color: #51B5A9;
}
.Yellow {
background-color: #FADE8B;
right: 0;
}
.White {
background-color: #F7F3D7;
bottom: 0;
left: 0;
}
.Transparent {
background-color: #E3516E;
border: 1px blue solid;
bottom: 0;
right: 0;
}
</style>

Answer 2

A conic gradient can do it:
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(#FADE8B 25%, #0000 0 50%, #F7F3D7 0 75%, #51B5A9 0)
}
body {
background: #E3516E;
}
<div class="box"></div>