ToolBoxes

Creating Pill Buttons with CSS

May 28, 20266 min read

What Are Pill Buttons?

Pill buttons — also called capsule buttons — are buttons with fully rounded ends, resembling a pill or capsule shape. Instead of squared-off corners, the left and right edges form complete semicircles, creating a smooth, approachable UI element.

Pill buttons have become a staple of modern web design. You'll find them in navigation bars, hero sections, call-to-action areas, and tag lists. Their rounded shape signals friendliness and interaction, making them especially popular in consumer-facing products and mobile interfaces.

The CSS Behind Pill Shapes

Creating a pill shape is remarkably simple. The key insight: when border-radius is set to a value equal to or greater than half the element's height, the corners form complete semicircles.

.pill-button {
  padding: 12px 32px;
  border-radius: 9999px; /* or 50rem */
  border: none;
  cursor: pointer;
}

Why 9999px instead of calculating 50%? The CSS spec caps border-radius at half the element's computed dimension. So 9999px effectively means "as round as possible" without you needing to know the exact height. This approach is robust — it works regardless of padding, font size, or content changes.

Tailwind CSS

Tailwind provides the rounded-full utility, which maps to border-radius: 9999px:

<button class="px-8 py-3 rounded-full bg-blue-600 text-white">
  Get Started
</button>

The Percentage Trap

A common mistake is using border-radius: 50%. This creates an oval, not a pill — the horizontal and vertical radii scale independently based on the element's width and height. For a pill, you want the horizontal radius to be large enough to form semicircles, which percentage values handle unpredictably.

ValueShapeWhy
9999pxPillCapped at half-height, always semicircular
50%Oval/OddHorizontal radius scales with width
100pxDependsOnly works at one specific height

Pill Button Variations

Size Variants

.pill-sm  { padding: 6px 16px;  border-radius: 9999px; font-size: 0.875rem; }
.pill-md  { padding: 10px 24px; border-radius: 9999px; font-size: 1rem; }
.pill-lg  { padding: 14px 36px; border-radius: 9999px; font-size: 1.125rem; }

Outlined Pill

.pill-outline {
  padding: 10px 24px;
  border-radius: 9999px;
  border: 2px solid currentColor;
  background: transparent;
  color: #2563eb;
}

<button class="pill-outline">Learn More</button>

Icon + Text Pill

When adding icons, adjust the horizontal padding to keep visual balance:

<button class="px-6 py-3 rounded-full bg-green-600 text-white inline-flex items-center gap-2">
  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
  </svg>
  Add Item
</button>

Pilled Tags and Badges

Pill shapes work great for tags, status badges, and chip components:

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.tag-blue    { background: #dbeafe; color: #1d4ed8; }
.tag-green   { background: #dcfce7; color: #15803d; }
.tag-red     { background: #fee2e2; color: #b91c1c; }

Hover and Active States

Pill buttons feel tactile — lean into that with smooth interactions:

.pill-button {
  padding: 10px 24px;
  border-radius: 9999px;
  background: #2563eb;
  color: white;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pill-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.pill-button:active {
  transform: translateY(0);
  box-shadow: none;
}

For dark mode, adjust the hover shadow and background:

.dark .pill-button {
  background: #3b82f6;
}

.dark .pill-button:hover {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

Common Pitfalls

  • Text too short: A pill button with very short text (like "OK") looks like a circle, not a pill. Ensure horizontal padding is generous enough to maintain the capsule shape.
  • Inconsistent sizing: When pill buttons sit next to regular buttons, their height must match visually. Adjust padding until the content area heights align.
  • Wrapping text: Pill buttons with multi-line text break the capsule shape. Use white-space: nowrap to prevent wrapping.

Try It Yourself

Design pill buttons interactively — adjust border-radius, padding, colors, and hover effects with our visual border-radius tool.

👉 Border Radius Generator