Menu
I can't seem to get rid of the thin white outline on the upper half of this circle. Any ideas on how to fix it? JSFiddle Demo
body {
background-color: black;
padding:50px;
}
.square {
background-color: white;
margin-bottom: 20px;
height: 200px;
width: 200px;
overflow: hidden;
}
.halfSquare {
background-color: #462a04;
height: 100px;
width: 200px;
}
.circle {
background-color: white;
height: 200px;
width: 200px;
border-radius: 50%;
overflow: hidden;
}
.halfCircle {
background-color: #462a04;
height: 100px;
width: 200px;
}<body>
<div class="square"><div class="halfSquare"></div></div>
<div class="circle"><div class="halfCircle"></div></div>
</body>
935
You're seeing this because the containing div .circle has a white background, which is leaking through. You can fix this by removing the background on the containing div and adding a second div for the white semi circle:
<div class="square"><div class="halfSquare"></div></div>
<div class="circle">
<div class="halfCircle"></div>
<div class="halfCircle2">
</div></div>
.circle {
height: 200px;
width: 200px;
border-radius: 50%;
overflow: hidden;
}
.halfCircle {
background-color: #462a04;
height: 100px;
width: 200px;
}
.halfCircle2 {
background-color: white;
height: 100px;
width: 200px;
}
https://jsfiddle.net/v9bLfkpx/1/
Before:
After:
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
