How to maintain border-radius shape as height changes - html

Question

I have assigned a border-radius of 50px to my div, to achieve the following results:
However, when the height of the div changes, the curvature of the border also changes
What I'm looking for is for the sides to remain straight and the corners to remain the same as the div expands, like so:
This is what my css currently looks like:
.card {
border-radius: 50px;
height: 100%;
}
I should also note, I have been searching for an answer to this question (I assume it's been asked before) but I haven't been able to find an answer. I think this probably has to do with my choice of words, but I'm not sure how else to ask this question. Apologies in advance if it is a duplicate.

Answer 1

In your first example you dont have border radius 50px as border radius cant be more than 50%
please see this answer for details.
Border-radius in percentage (%) and pixels (px) or em
so, to make it same for 2 boxes just use right border-radius values - 20px for example.
jsfiddle.net/xky4r539/

Answer 2

That's because 50px is too high a value for border-radius in the first place.
The reason why it works when it's small is because it gets capped at half the height of the side between them. So in your above example the actual (resulting) value is around 18px (half the height of the div).
When the div becomes taller, its small height no longer limits border-radius value and it goes up until specified 50px. You need to play with its size (or measure it) so it is correct for the tall box. I assure you it will also be correct for the short case as well.

Answer 3

50px border radius is too big here. you can use 20px.
.card {
margin-bottom:20px;
background: yellow;
padding: 10px;
width: 80%;
border-radius: 20px;
position: relative;
}
.avatar {
background: red;
height: 50px;
width:50px;
border-radius:50%;
position: absolute;
top: -2px;
right: -2px;
}
p {
width: calc(100% - 20px);
}
<div class="card">
<p>Lorem Ipsum is simply dummy text of the printing and typeset </p>
<div class="avatar"></div>
</div>
<div class="card">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="avatar"></div>
</div>
<div class="card">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="avatar"></div>
</div>