Tailwind CSS: Rounded Corners - Gotcha
The "Gotcha": Parent Rounding vs. Child Content
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's sharp corners might "poke out".
1. The Problem: Child Overflowing Parent's Rounded Corners
Here, the parent
div
has
rounded-xl
, but the image inside fills the parent and its sharp corners are visible.
Notice the yellow image's sharp corners "poking out" of the blue rounded container.
2. Solution A: Using
overflow-hidden
on the Parent
Adding
overflow-hidden
to the parent container will clip the child content to the parent's rounded shape.
The image is now neatly contained within the parent's rounded bounds.
3. Solution B: Applying
rounded-*
to the Child Element
Alternatively, you can apply the same (or appropriate)
rounded-*
utility to the child element itself.
Both parent and child are rounded, achieving the desired effect.
Key Takeaway:
For elements like images or embedded content that might fill a rounded parent, use either
overflow-hidden
on the parent or apply rounding directly to the child to maintain the visual integrity of the rounded corners.