I have two elements with the same dimensions one (gray) on top of the other (yellow), but I keep getting some pixels of the bottom element showing
body{
background:#31313a
}
.bottom{
position:relative;
border-radius: 50%;
width: 90px;
height: 90px;
border: solid 8px #ff9800;
}
.top{
position: absolute;
width: 90px;
height: 90px;
border: solid 8px #3e4148;
border-radius: 50%;
top: -8px;
left: -8px;
}<div class='bottom'>
<div class='top'>
</div>
</div>Can you help me make the bottom element (yellow) completely under the top element (gray)?
ps: I’m using Firefox for Ubuntu 99.0 (64-bit) and Here Is a screenshot of what I’m getting :
>Solution :
It just needs a bit of adjustment, use 10px for the border and -9px for the positioning.
body {
background: #31313a
}
.bottom {
position: relative;
border-radius: 50%;
width: 90px;
height: 90px;
border: solid 8px #ff9800;
}
.top {
position: absolute;
border: solid 10px #3e4148;
border-radius: 50%;
top: -9px;
bottom: -9px;
left: -9px;
right: -9px;
}<div class='bottom'>
<div class='top'>
</div>
</div>