CSSのオーバーフローがすべての要素を隠すことはできませんか？

Question

.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; 
 
}

<div class="powder-box"> 
 
    <div class="powder-inner"> 
 
    <div class="powder-wave" style="margin-top: -54px"></div> 
 
    </div> 
 
</div>

.powder-インナーオーバーフロー隠し、そこに境界線をそこに持っています。すべてをカバーすることはできません。 どうすればすべてをカバーできますか？その後、上部の緑色の曲線を削除border-top-left-radius: 0%; & border-top-right-radius: 0%;を使用してthere is border there ?

Answer 1

更新.powder-innerクラス。

出力を参照はブラウザズームで緑色の曲線が表示されます。

.powder-inner { 
    width: 45px; 
    height: 45px; 
    border: 2px solid white; 
    border-radius: 49%; 
    box-shadow: 0 4px 10px 0 #656565; 
    background-color: #00c690; 
    overflow: hidden; 
    margin: 1px; 
    z-index: 2000; 
    border-top-left-radius: 0%; 
    border-top-right-radius: 0%; 
} 

.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: 49%; 
 
    box-shadow: 0 4px 10px 0 #656565; 
 
    background-color: #00c690; 
 
    overflow: hidden; 
 
    margin: 1px; 
 
    z-index: 2000; 
 
    border-top-left-radius: 0%; 
 
    border-top-right-radius: 0%; 
 
} 
 

 
.powder-wave { 
 
    background-color: white; 
 
    height: 70px; 
 
}

<div class="powder-box"> 
 
    <div class="powder-inner"> 
 
    <div class="powder-wave" style="margin-top: -54px"></div> 
 
    </div> 
 
</div>

Answer 2

.powder-box { 
 
    width: 51px; 
 
    height: 51px; 
 
    border-radius: 50%; 
 
    border: 2px solid #A5B2B5; 
 
    box-shadow: 0 1px 2px 0px #A5B2B5; 
 
    overflow: hidden !important; 
 
    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 !important; 
 
    margin: 1px; 
 
} 
 

 
.powder-wave { 
 
    background-color: white; 
 
    height: 70px; 
 
}

<div class="powder-box"> 
 
    <div class="powder-inner"> 
 
    <div class="powder-wave" style=""></div> 
 
    </div> 
 
</div>