hide element completely under another element-CodePudding

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 :

CodePudding user response：

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>