Button Rounding Gotcha: Inner Content Overflow

**Gotcha:** If a button has an image or icon inside that isn't also rounded or masked, the sharp corners of the inner element might "poke out" of the button's rounded corners. The solution is often to add `overflow-hidden` to the button itself.

Problem: Image Corners Poking Out

This button uses `rounded-full` but does NOT have `overflow-hidden`. Notice the square image corners.

Solution: Using `overflow-hidden`

This button uses `rounded-full` AND `overflow-hidden`. The image corners are now clipped to the button's rounded shape.

Key Takeaway for the Gotcha:

When using rounded corners on an element that contains other elements (especially images or items with their own backgrounds/borders), apply `overflow-hidden` to the parent rounded element to ensure its children conform to its rounded shape.