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

SaaS 'Get Started' buttonsNewsletter signup buttonsMobile 'floating' actionsTags and categories labels

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 Button

Frequently 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.