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

Question

Take a 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 alright */
}

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

See the problem here

In short, is there a reason Chrome / Edge / Firefox leaves a small blue border when I use overflow: the hidden and border radius on the parent? Is there any way around this?

Answer 1

What you see is caused by a merge composition. spanis drawn and smoothed separately from div, and then they are layered. Partial transparency around the edge divexpires through partial transparency around the edge span. There really is no way to fix this.

Answer 2

, , .

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>

Hide result