Thin line when rendering overflow:hidden with border-radius - html

Question

To implement some fancy round progress bars, I used an element with border radius and overflow:hidden. Everything looks fine, except one thing: all browsers display a thin line where the overflow ends.
here's some simple snippet that reproduces this bug in all major browsers:
function setMarginLeft(value){
var element = document.querySelector(".overflowing");
element.style.marginLeft = value+"px";
}
function setMarginTop(value){
var element = document.querySelector(".overflowing");
element.style.marginTop = value+"px";
}
.backdrop {
background-color: white;
padding: 10px;
width:100px;
height:100px;
}
.circle {
background-color: red;
width:100px;
height:100px;
border-radius: 100px;
overflow:hidden;
}
.overflowing {
width:200px;
height:200px;
margin-top: 10px;
margin-left: 10px;
background-color:#fff;
}
input {
margin-top:10px;
}
<div class="backdrop">
<div class="circle">
<div class="overflowing"></div>
</div>
</div>
<span>top and right of the circle you should see some red, bottom left not</span><br />
<em>Feel free to play around with these values:</em><br />
Top margin: <input type="number" id="cngMargin" oninput="setMarginTop(this.value)" value="10"><br />
Left margin: <input type="number" id="cngMargin" oninput="setMarginLeft(this.value)" value="10">
since the layout isn't nearly as easy as the snippet above, i can't change the layout much.
i guess the essential problem here is the browser's anti-aliasing, which i think is not alterable by css, or is it?
i googled myself stupid on that matter and can't come up with really usefull ressources. i guess if nothing else works, i'll have to do it anew in SVG or on a canvas -.-

Answer 1

Not fully supported right now but overflow-clip-margin could be a solution:
overflow: hidden; // for unsupported browsers
overflow: clip;
overflow-clip-margin: 2px;
Note: I don't fully understand your example but for my situation I had a title
bar that was getting a white line around it (inside the border). This is an exaggeration with overflow-clip-margin: 5px but if it's only 2px then it matches with the blue border on the white box.

Answer 2

This seems possible without the overlay by using a background-image with multiple linear-gradients. The JavaScript to insert the two values into the combined linear-gradient is rather clunky as I wrote it hastily to prove the solution. It can be better!
Tested in Chrome only.
var marginTop = marginLeft = 0;
function setMarginLeft(value) {
marginTop = value;
applyToCircle();
}
function setMarginTop(value) {
marginLeft = value;
applyToCircle();
}
function applyToCircle() {
var element = document.querySelector('.circle');
element.style.backgroundImage = 'linear-gradient(90deg, red '+ marginTop + '%, transparent 0%), linear-gradient(180deg, red '+ marginLeft + '%, transparent 0%)';
}
.backdrop {
background-color:white;
padding: 10px;
width:100px;
height:100px;
}
.circle {
width:100px;
height:100px;
border-radius:50%;
}
input {
margin-top:10px;
}
<div class="backdrop">
<div class="circle">
</div>
</div>
<em>Feel free to play around with these values:</em><br />
Top margin: <input type="number" id="cngMargin" oninput="setMarginTop(this.value)" value="0"><br />
Left margin: <input type="number" id="cngMargin" oninput="setMarginLeft(this.value)" value="0">