Crop div to sibling div - html

Question

I have the following overlapping divs:
#circle {
width: 150px;
height: 150px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
border-radius: 100%;
margin-top: 30px;
}
#rect {
margin-left: 20px;
width: 100px;
height: 100px;
border-radius: 5px;
background-color: lightblue;
display: inline-block;
}
<div id='wrapper'>
<div id='circle'></div>
<div id='rect'></div>
</div>
I want to make the circle div only appear inside of the rectangle div, but I cannot put one inside the other and use overflow. How can this be achieved?

Answer 1

If it's only about visual, use the circle as background of the div:
#rect {
margin-left: 20px;
width: 100px;
height: 100px;
border-radius: 5px;
background:radial-gradient(circle 75px at 55px 105px, rgba(0, 0, 0, .3) 99%,transparent);
background-color: lightblue;
display: inline-block;
}
<div id='wrapper'>
<div id='rect'></div>
</div>

Answer 2

This isn't very practical, but the only way to do this without changing the markup is to crop it with the parent wrapper using position: relative and overflow: hidden on the parent. Adjust the location of the circle with top: 30px and left: -20px.
The parent would also need to set the rounded corners with
border-radius: 5px.
Of course if this is just a background, then it should be set with a background radial gradient on the rectangle.
Example
#wrapper {
position: relative;
display: inline-block;
margin: 30px;
border-radius: 5px;
overflow: hidden;
}
#circle {
width: 150px;
height: 150px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
top: 30px;
left: -20px;
border-radius: 100%;
}
#rect {
width: 100px;
height: 100px;
background-color: lightblue;
}
<div id="wrapper">
<div id="circle"></div>
<div id="rect"></div>
</div>