Creating a circular border radius on multiple child components - html

Question

so what i am trying to do is have a circle which inside of it, contains an image and a description which overlays the image at 50% Opacity. Heres the result so far:
So, obviously, i want the entire div to have this border-radius, and so far have had to set the parent and img components to have this certain border-radius. What i was wondering was how to have all elements with a circular radius,
(bonus points possibly using border-radius: XX% and not border-radius: XXpx;). Heres what i have tried so far:
JSX
return(
<div className="container">
<img src={this.props.src} alt=""/>
<div className="descriptor">
<h4>{this.props.title}</h4>
</div>
</div>
);
CSS
.container{
margin: 20px;
height: 200px;
width: 200px;
border-radius: 20px;
position: relative;
border-radius: 100px;
display: inline-block;
border-radius:100px;
border:2px solid red;
}
.container img{
max-width:100%;
border-radius:100px;
float: left;
}
.descriptor{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30%;
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
color: white;
opacity: 0.5;
/*NOTE: Here i have tried using things like border-bottom-left-radius: 750px;
But yeah that didnt work*/
}

Answer 1

Here's a demonstration with the comments for the appropriate CSS style attributes.
.roundc{
width:300px; /*Width and height need to be equal for border radius*/
height:300px; /*50% to work and make the square circular */
display:inline-block;
border-radius: 50%; /*Make the container circular */
border:3px solid red;
overflow: hidden; /*Hide the content overflow */
position:relative; /*To use absolute positioning on img*/
}
.roundc img{ /*To center the large image */
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.roundc span{
position:absolute;
z-index:1;
background:red;
color:white;
width:300px;
height:30px;
text-align:center;
bottom:0;
}
<div class="roundc">
<img src="http://via.placeholder.com/350x350">
<span> About me </span>
</div>