Pill shape

Quick implementation

.pill {
  border-radius: 9999px;
}

/* Tag — subtle tinted background */
.pill-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 9999px;
  background: oklch(0.28 0.09 265);
  color: oklch(0.82 0.12 265);
}

/* Badge — solid, uppercase */
.pill-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 9999px;
  background: oklch(0.52 0.22 265);
  color: oklch(0.97 0.01 265);
}

/* Pill button */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.25rem;
  border: none;
  border-radius: 9999px;
  background: oklch(0.52 0.22 265);
  color: oklch(0.97 0.01 265);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

/* Pill input */
.pill-input {
  padding: 0.5rem 1.1rem;
  border: 1.5px solid oklch(0.30 0.04 265);
  border-radius: 9999px;
  background: oklch(0.19 0.02 260);
  color: inherit;
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
}

.pill-input:focus {
  border-color: oklch(0.52 0.22 265);
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a UI component library.

Goal: Create pill-shaped variants of tags, badges, buttons, and input
fields using only CSS — no JavaScript required.

Technical constraints:
- Use border-radius: 9999px (or 100vmax) for the pill shape on every
  element. Never calculate a specific pixel value from the element height.
- Use oklch() for all color values — no hex or rgba. Use CSS custom
  properties (var(--accent), var(--card), etc.) where applicable.
- Padding ratios: for pill buttons use at least 2:1 horizontal-to-vertical
  padding (e.g. 0.55rem 1.25rem) so the shape reads as a pill, not a
  circle or square.
- Pill inputs should have matching border-radius and a visible focus ring
  using border-color or outline rather than box-shadow only.
- Tags and badges are inline-flex with align-items: center so icon + text
  combinations stay vertically centred.

Framework variant (pick one):
A) Vanilla CSS utility classes: .pill-tag, .pill-badge, .pill-btn, and
   .pill-input. Color modifiers as BEM modifiers (e.g. .pill-tag--green).
B) React component — a <Pill> component accepting as, variant, size,
   and color props; renders the correct element type via the "as" prop
   (span for tags, button for buttons, input for inputs).

Edge cases to handle:
- Very long text inside a pill button will eventually make it look like a
  rounded rectangle, not a pill — this is expected and acceptable; document
  this for designers.
- Multi-line pill elements break the shape — pills should always be
  single-line; add white-space: nowrap if truncation is acceptable.
- High-contrast mode: border-radius is preserved, but ensure the border or
  background is visible by not relying on color alone (add a 1px border
  as a fallback).

Return CSS only (or a React component if variant B is chosen).

Why 9999px works for any height

The CSS spec says that when the sum of adjacent border radii exceeds the element's dimension, the browser scales both down proportionally so they share the available space. A value of 9999px is so large that on any practical element it will always exceed half the element's height — causing the browser to clamp it to exactly 50% of the height on each end. The result is a perfect semicircle cap regardless of the element's actual height in pixels.

The alternative, border-radius: 100vmax, achieves the same effect and is arguably more semantically correct — it uses a viewport-relative unit so large it always exceeds any practical dimension. In practice both work identically across all modern browsers, and 9999px is more widely understood by developers scanning unfamiliar code.

Neither approach requires you to know the element's height at write time, which is the key advantage over calculating a specific value like border-radius: 1.5rem. When the element's font size or padding changes, the pill shape adapts automatically.

Pill vs rounded corners

Pill shapes and rounded corners solve different problems. Rounded corners — a modest border-radius like 0.375rem or 0.5rem — soften a rectangular element while preserving its rectangular character. They are appropriate for cards, modals, panels, and input fields where the content area needs clear rectangular bounds.

Pill shapes, produced by border-radius: 9999px, communicate a categorically different affordance. Tags and badges are not containers of content — they are labels attached to content. The fully-rounded shape signals "this is a label, not a region." Pill buttons are common in mobile and marketing design because the continuous curve draws the eye and reads as "tappable" more clearly than a rectangle.

As a rule of thumb: use pill shapes for short, inline, single-line elements — tags, badges, chips, small buttons, and pill inputs. Use rounded corners (but not full pills) for larger containers — cards, dialogs, dropdowns, and multi-line form fields.

Padding ratios for pill buttons

A pill button requires a horizontal-to-vertical padding ratio of at least 2:1 to read as a pill rather than a circle or a nearly-square rounded rectangle. With padding: 0.55rem 1.25rem the ratio is approximately 2.3:1, which gives a clearly elongated pill at typical text sizes.

For icon-only pill buttons (a single emoji or SVG icon, no text label), the padding should be equal on all sides — making the element a circle, which is a degenerate form of pill. Use width and height explicitly and display: grid; place-items: center rather than padding for reliable circles.

Size variants should scale padding proportionally. A small pill button at 0.35rem 0.9rem (ratio 2.6:1) and a large one at 0.75rem 1.75rem (ratio 2.3:1) maintain the pill character at all sizes. Avoid reducing the horizontal padding below 0.75rem at any size — below that threshold the shape starts to look like an oval rather than a pill.