Gotcha: Parent Rounding & Child Overflow

Problem: Child Overflows Parent's Rounded Corners

Placeholder Image

Notice the sharp corners of the image despite the parent having rounded-2xl .

Solution: overflow-hidden on Parent

Placeholder Image

Here, overflow-hidden on the parent clips the image to the parent's rounded shape.

Gotcha Explanation:

Applying rounded-* to a parent container doesn't automatically round the corners of its child elements if they fill the parent (like an image). The child element might still display its sharp corners, "overflowing" the parent's rounded shape. One solution is to add overflow-hidden to the parent container, which will clip the children to the parent's rounded bounds.