Styling Common Web Page Parts
Give buttons rounded or pill-shaped corners.
Skill ID: StylingCommonParts_12
Description: Soften the sharp corners of a button or make it look like a capsule.
Where to apply: Modern-looking buttons, tags, labels.
Key Tailwind Classes:
rounded-md
,
rounded-full
Gotcha:
If the button has an image or icon inside that isn't also rounded or masked (e.g., with
overflow-hidden
on the button), the sharp corners of the inner element might "poke out" of the button's rounded corners.
Example:
The "Gotcha" can be observed if
overflow-hidden
is not applied to buttons containing non-rounded content, or if the content itself is not appropriately masked/rounded.