Thin line when rendering overflow:hidden with border-radius

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

Why do you have margin-top and margin-left on the .overflowing element? Without that I don't see the bleed. — Harry
– Harry, Commented Jan 15, 2016 at 5:53

Simon_Weaver · Accepted Answer · 2022-06-23 20:30:39Z

2

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.

answered Jun 23, 2022 at 20:30

Simon_Weaver

147k92 gold badges688 silver badges723 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

andyb · Accepted Answer · 2016-01-15 00:07:19Z

0

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

edited Jan 15, 2016 at 0:07

answered Jan 15, 2016 at 0:02

andyb

43.9k12 gold badges126 silver badges155 bronze badges

2 Comments

Mr.Manhattan Over a year ago

as i said, it's not all that simple. my example was just the simplest way to reproduce the error.

andyb Over a year ago

it would have been better to clearly explain exactly which parts of the layout can be changed so other people don't waste their time developing solutions which address the stated issue of removing the thin line where the overflow ends

Collectives™ on Stack Overflow

Thin line when rendering overflow:hidden with border-radius

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related