Rounded Corners: Parent vs. Child Gotcha

Gotcha: Applying rounded-* to a parent container doesn't automatically round the corners of its child elements if they fill the parent (like an image). You might need overflow-hidden on the parent, or also apply rounded-* to the child.

1. Incorrect: Parent Rounded, Child Fills

Parent has rounded-lg . Child image fills parent. Notice the image corners are sharp and poke out.

Image with sharp corners

2. Corrected: overflow-hidden on Parent

Parent has rounded-lg and overflow-hidden . The child image's corners are now clipped by the parent.

Image with clipped corners

3. Corrected: rounded-lg on Child

Parent has rounded-lg . Child image also has rounded-lg . The image itself is now rounded.

Image with its own rounded corners

Alternative: Child Rounded Inside Padded Parent

Here, the parent has rounded-lg and p-4 . The child image also has rounded-lg . The image is rounded within the parent's padding.

Image rounded inside padded parent