Pill Button
A button with a fully-rounded radius (border-radius: 9999px) so the ends form perfect semicircles.
A pill button uses a corner radius equal to or greater than half its height, producing fully rounded ends. The shape feels softer, friendlier, and more 'modern' than rectangular or moderately-rounded buttons.
It became the dominant CTA style in 2020s consumer products (Apple, Stripe, Linear, modern SaaS) and now reads as default for marketing surfaces. Pair sparingly with sharp components — pills against sharp cards creates intentional contrast.
- Marketing CTAs and hero buttons
- Consumer products and modern SaaS
- Soft, friendly brand directions
- Brutalist or hyper-utility UIs
- Dense forms — pills take more horizontal space
- +Use border-radius: 9999px or 999rem for true pill shape
- +Keep horizontal padding 1.5–2× the vertical padding
- −Don't mix pill primary with sharp secondary — pick a radius language
People also ask
What is a pill button?
A button with a fully rounded border-radius (border-radius: 9999px), so the left and right edges become semicircles regardless of the button's height.
When should I use pill buttons?
Friendly, casual, and consumer-facing brands; music and lifestyle apps; record-label and editorial sites that want a softer, badge-like CTA voice.
When are pill buttons the wrong choice?
Dense data UIs, enterprise dashboards, and developer tools where the geometry should read as utilitarian. There, 4–8px corners feel more correct.
How is a pill different from a rounded rectangle?
A rounded rectangle has a fixed corner radius (e.g., 8px). A pill always has a radius equal to half its height, so the ends are perfect semicircles.