Line/border with border-radius, overflow:hidden and colored background

Question

Please look at this JSFiddle: https://jsfiddle.net/fmhhg00d/3/

<div><span>•</span></div>

div {
 width: 500px;
 height:500px;
 background: blue;
 overflow: hidden;
 border-radius:50%; /* --> Remove this and it's alright */
}

span {
 line-height:0.20;
 font-size: 2500px;
 color: white;
}

See the problem here

In short, is there a reason why Chrome/Edge/Firefox all leave a small blue border when I use overflow:hidden and border-radius on the parent? Is there a way to bypass this?

Answer 1

That is, as Ouroborus answered, an anti-alias issue.

As a workaround, you could use pseudo elements to achieve the given layout

body {
  background: #f8f8f8;
}
div {
  position: relative;
  width: 500px;
  height:500px;
  overflow: hidden;
  border-radius:50%;
}
div::before,
div::after {
  content: '';
  position: absolute;
  top: 0; left: -180px;
  width: 500px;
  height:500px;
  background: blue;
}
div::after {
  left: 140px;
  background: white;
  border-radius:50%;
}

<div></div>

Answer 2

What you're seeing is caused by anti-alias compositing. The span is drawn and anti-aliased separately from the div and then they are layered. The partial transparency around the edge of the div bleeds through the partial transparency around the edge of the span. There isn't really a way to fix this.