Divs on top of each other, bottom div edge showing. - html

Question

I made this sorta simple circular loader-thingy, whith two half circles covered with another two half circles that are positioned right on top of them. The covers rotate and reveal the bottom circles to make it look like a circular loading bar.
The problem is that the edge of the bottom circles are visible in some browsers, and there are some mobile browser issues with that as well. Is there a solution for this?
CSS
.wrap{
position:relative;
width:100px;
height:100px;
overflow:hidden;
border-radius:50px;
}
.circle{
position:absolute;
top:0;
width:50px;
height:100px;
background:black;
}
.cover{
position:absolute;
left:0;
width:50px;
height:100px;
background:white;
}
.halfcircleleft{
width:50px;
position:absolute;
top:0;
left:0;
}
.halfcircleleft .circle{
z-index:3;
border-radius:50px 0 0 50px;
}
.halfcircleleft .cover{
z-index:4;
border-radius:50px 0 0 50px;
}
HTML
<div class="wrap">
<div class="halfcircleleft">
<div class="circle"></div>
<div class="cover"></div>
</div>
<div class="halfcircleright">
<div class="circle"></div>
<div class="cover"></div>
</div>
</div>

Answer 1

what about using a circle with transparent background and white border bigger than holeto put it over the border you want to remove?like:
.hole, .hole2{
z-index:99;
position:absolute;
width:86px;
height:86px;
top:7px;
left:7px;
background:lightgrey;
border-radius:50%;
text-align:center;
line-height:86px;
font-family:Arial;
font-size:38px;
padding-right:2px;
}
.hole2 {
background:transparent;
border:4px solid white;
width:106px;
height:106px;
top:-3px;
left:-3px;
}
then just remove the overflow:hiddenof wrapwhich it's not doing anything (at least in your example)
JSFIDDLE