title: css overflow hidden can't cover all element?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.powder-box {
    width: 51px;
    height: 51px;
    border-radius: 50%;
    border: 2px solid #A5B2B5;
    box-shadow: 0 1px 2px 0px #A5B2B5;
    overflow: hidden;
    position: relative;
  }
  
  .powder-inner {
    width: 45px;
    height: 45px;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 4px 10px 0 #656565;
    background-color: #00c690;
    overflow: hidden;
    margin: 1px;
  }
  
  .powder-wave {
    background-color: white;
    height: 70px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="powder-box"&gt;
    &lt;div class="powder-inner"&gt;
      &lt;div class="powder-wave" style="margin-top: -54px"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>.powder-inner overflow hidden ,there have a border in there . it can't cover all .
  how can i cover all ? <a href="https://i.stack.imgur.com/s66oE.jpg" rel="nofollow noreferrer">there is border there ?</a></p>