The "Gotcha":
If a button has inner content (like an icon, image, or even a pseudo-element background) that is square or has sharp corners, these corners might "poke out" from the button's rounded shape if the button does not also have
overflow-hidden
.
This button uses
rounded-full
. The inner square
<span>
has sharp corners that extend beyond the button's curve because
overflow-hidden
is missing.
Notice the sharp corners of the dark rose square.
overflow-hidden
Applying
overflow-hidden
to the button clips any inner content that extends beyond its boundaries, maintaining the intended rounded shape.
The dark emerald square's corners are now neatly clipped.
Another way to handle this is to also apply rounding to the inner element if it's an image or icon, e.g., using
rounded-full
on an avatar inside a pill button.