Illustrating how sharp corners of an inner element (like an image) can "poke out" of a rounded button, and how to fix it.
This button is
rounded-full
, but the square image inside it has its corners visible, breaking the pill shape illusion.
Notice how the red square's corners extend beyond the purple button's intended curve.
overflow-hidden
Applying
overflow-hidden
to the button clips any content that extends beyond its rounded boundaries.
Here, the green square's corners are neatly clipped by the button's rounded shape due to
overflow-hidden
.
Gotcha Explanation:
When a parent element (like a button) has rounded corners (e.g.,
rounded-full
), child elements (like an
<img>
or an icon with a background) don't automatically inherit this clipping mask. If the child has sharp corners and is sized to fill or nearly fill the parent, its corners can visually "poke out".
The Fix:
Apply
overflow-hidden
to the parent (the button). This tells the browser to clip any content from child elements that extends beyond the parent's boundaries (including its rounded corners).
Alternatively, you could also apply rounding to the inner element itself (e.g.,
<img class="rounded-full">
), but
overflow-hidden
on the container is often a more robust solution for arbitrary content.