Overflow property of css with some modification's.

Question

I was just making a code and discovered that if the overflow property of an element is set to hidden it works for if only till its border radius is 0;
If its border radius is 50% or 100% it doesn't hide the rest of the overflowing scene and displays in the block .How can I make it compatible for this in such case . Plz answer if you know .
Considered the code below .

Answer 1

You can use clipping mask. Check here

https://css-tricks.com/clipping-masking-css/

Answer 2

HTML =>

<div class = "BG">
<div class = "mounts">
</div>
</div>

CSS =>

.BG {
height:200px;
width:200px;
overflow:hidden;
border-radius:50%
background-color:red;
}
.mounts {
height:400px;
width:200px;
border-radius:50%;
background-color:rgb(120,120,120);
}

if we take the center of the div with class mounts to a corner , we can see a visible overflow .