Why is there a light circle in my css circle? - html

Question

I have that little css which draws a circle and fills it till half using backgrounds. Both containing div's have the same size but the lower one's background is still visible.
Shouldn't the div.bg cover the div.fill? So the upper half of the cirlce should be completely black? (there is a thin white line)
body {
background: black;
}
#asd {
height: 35px;
width: 35px;
border-radius: 35px;
overflow: hidden;
position: relative;
}
span {
color: red;
text-align: center;
font-size: 10px;
line-height: 35px;
position: absolute;
height: 100%;
width: 100%;
z-index: 3;
}
#asd div {
height: 100%;
width: 100%;
position: absolute;
}
div.bg {
background: white;
z-index: 1;
}
div.fill {
background: black;
height: 50% !important;
z-index: 2;
}
<div id="asd">
<span>lorem</span>
<div class="bg"></div>
<div class="fill"></div>
</div>

Answer 1

This is due to anti aliasing, and colour addition.
First, the browser paints a perfectly white circle:
The white circle is behind the black circle, and to make the edges look smooth, the edge pixels are blended slightly. This is called anti-aliasing or supersampling.
Now the background circle has been anti-aliased, we're left with a perfect white circle surrounded by a grey outline. The exact shade of grey is decided by the browser, but usually this decision is made by interpolating between the background and foreground colours. Let's assume this creates 50% black/white.
The next step is to create a black circle over the top of the white circle, and this will be anti-aliased in exactly the same way. This is where the problem occurs, as an incorrect assumption is made by the browser.
The black circle, exactly the same size as the white circle, is blended into the background to look smooth. Because there are already 50% black/white pixels surrounding the white circle, the black is added to these using the same algorithm, creating 25% black/white.
This is simply a limitation/design choice of the individual browsers, and some would argue that it is indeed correct behaviour. As you've found, or will find, in web design there are many ways to skin a cat, so my advice would be to look for an alternative solution rather than hack this exact problem.
General rule of thumb: try not to include extra markup to achieve visual style. One can usually achieve everything with just CSS. Keep in mind background gradients, pseudo-elements and borders and most visuals are in reach.
As a head start, I would not suggest using two div elements for this styling. Instead, I would use the background property of the white circle to describe the visual effect you are looking for.
Specifically: background: linear-gradient(to bottom, black 50%, white 50%);
body {
background: black;
}
#asd {
height: 35px;
width: 35px;
border-radius: 35px;
overflow: hidden;
position: relative;
}
span {
color: red;
text-align: center;
font-size: 10px;
line-height: 35px;
position: absolute;
height: 100%;
width: 100%;
z-index: 3;
}
#asd div {
height: 100%;
width: 100%;
position: absolute;
}
div.bg {
background: linear-gradient(to bottom, black 50%, white 50%);
z-index: 1;
}
<div id="asd">
<span>lorem</span>
<div class="bg"></div>
</div>

Answer 2

I think you're referring to the jagged edges around your circle, which I think is a rendering artifact caused anti-aliassing.
The border-radius on the elements get sharpened so-to-speak by anti-aliassing, which renders differently coloured pixels around the element to smoothen out hard edges (please correct me if this is wrong, I'm no expert on this). Normally this is behaviour is fine, but in your case it cases artifacts.
Have a look at my snippet below. The result is the same, but uses a background gradient to achieve it.
body {
background: black;
}
.circle {
width: 35px;
height: 35px;
line-height: 35px;
font-size: 11px;
border-radius: 50%;
color: red;
text-align: center;
background: linear-gradient(0deg, white 50%, black 50%);
}
<div class="circle">
lorem
</div>