Phantom Border on Element - html

Question

I have a filled circle and a child element. I want the child ele to be 'attached' to the circle on the left. But I don't want this ele to have a visible border on its right edge.
I'm not sure why, but when these two eles are overlapped, the child ele has this faint kind of dashed border on the right.
body {
height: 900px;
width: 1600px;
zoom: 500%;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.circle {
position: absolute;
/* border: solid 3px black; */
background: yellow;
width: 300px;
height: 300px;
border-radius: 100%;
display: flex;
align-items: center;
}
.arc {
position: absolute;
width: 29%;
height: 25%;
background-color: yellow;
transform: translate(-68%, 15%) rotate(-24deg);
border-radius: 100% 0% 0% 100%;
/* Changing the last num to 0 gets rid
of the phantom border..? */
border-width: 3px 0px 3px 3px;
border-color: black;
border-style: solid;
/* Padding 1px works to get rid of it when the element isnt rotated */
padding: 1px;
}
<div class="container">
<div class="circle">
<div class="arc"></div>
</div>
</div>
https://codepen.io/CoreyBuckley/pen/ZEWKMaZ
Help on why this is occurring and how to get rid of it is much appreciated!

Answer 1

If nothing else works hide it indirectly with a pseudo element, matching the colour at the edge seems to sort out what appears to be an aliasing problem Edit: I checked setting DPI scaling to 100% it doesnt appear to be linked with that.
.arc:before {
content: ' ';
display: block;
position: absolute;
right: 0;
top: 0;
width: 1px;
height: 100%;
background-color: yellow;
}