Thin line on overflow: hidden with border radius

Question

To implement some fantastic rounds of execution, I used an element with a border radius and overflow: hidden. Everything looks great except for one: all browsers display a thin line where the overflow ends.

Here are some simple snippets that reproduce this error 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: -1px;
  margin-left:1px;
  background-color:#fff;
}
input {
  margin-top:10px;
}

<div class="backdrop">
  <div class="circle">
    <div class="overflowing"></div>
  </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="-1"><br />
Left margin: <input type="number" id="cngMargin" oninput="setMarginLeft(this.value)" value="1">

Run codeHide result

since the layout is not as simple as the above snippet, I cannot change the layout much. I assume that the main problem is antialiasing the browser, which I think is not changed by css, or is it?

I was looking stupidly in this matter and could not come up with really useful stories. I think if nothing works, I will have to do it again in SVG or on canvas .-

Answer 1

background-image linear-gradient s. JavaScript linear-gradient , , . !

Chrome.

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">

Hide result