Modern Pill Button Style Guide
Pill buttons are friendly and modern. Learn the 999px trick to ensure your buttons stay perfectly capped regardless of their length.
When to use this solution:
Use this for landing page buttons where you want a friendly, approachable, and modern visual style.
Common Use Cases
1Step-by-Step Guide
Enable global rounding
Start by setting all corners to the same large value.
Use the '999px' trick
Set border-radius to a very high number (like 999px) to force the ends to be fully rounded semicircles.
Adjust padding
Add significant horizontal padding (e.g., 32px) to emphasize the long pill shape.
Copy Pill CSS
The tool generates a single, clean border-radius property for you.
Ready to get started?
Use our free tool to solve this problem in seconds. No installation required.
Design Pill ButtonFrequently Asked Questions
Why 999px?
Browsers cap the radius at half the height. Using a massive number ensures you always reach that cap even if the button grows.
Does 50% work for pills?
No, 50% on a wide rectangle will create an oval. For pills, stick to large pixel values.