styles

Shape

Corner radius makes containers feel soft and approachable, and groups what belongs together.

  • Cards and panels: tw-rounded-xs (12px) to tw-rounded-sm (15px).
  • Buttons, chips and search bars: tw-rounded-lg (25px) or tw-rounded-full.
  • Images inside cards: follow the card's top corners; the library's BaseCard does it already.
  • Small labels and badges: tw-rounded-3xs (4px) or 2xs (8px).

✓ Do

Nest radii: an inner element's radius is the outer radius minus the padding between them, so the curves stay parallel.

✕ Don't

Mix square and rounded corners on the same level of a page.