Child Elements Overflowing CSS border-radius

Example

As shown above, although border-radius is specified for the parent element, the child img element overflows, and as a result, the left side remains squared off.

Conclusion

In such cases, we consider that the child element is overflowing the parent element.
When it comes to overflowing, we think of overflow.

Specifically, apply the following style to the parent element:

overflow: hidden;

Then, it will result in the intended design as shown below.

Common Mistakes

Do not apply border-radius to the img element

border-radius: 0.75rem;

It's easy to think that applying the style above to the img will solve the problem, but if you actually try it, it will look like this:

As you can see, the right side of the img also becomes rounded.
In the eagerness to "round" the corners, it's easy to focus only on the child element. Be careful to apply the style to the parent element instead.