BetterCSS

Border radius rounds corners. Inner elements should use outer radius minus padding for concentric curves.

When to use

Buttons, cards, avatars, and inputs. Full radius (9999px) makes pills and circles.

Class combinations

Utilities stack. These recipes do more together than any single class alone. Try them after you've explored the sandbox above.

  • Concentric nesting

    rounded-2xl p-4 [&>*]:rounded-[calc(1rem-4px)]

    Outer radius minus padding ≈ inner radius. Keeps nested corners visually parallel.

  • Pill button

    rounded-full px-5 py-2

    Full radius on a horizontal control reads as a pill. Pair with horizontal padding > vertical.

Summary

  • border-radius rounds corners of the border box. One value applies to all four; two values set diagonal pairs.
  • Radius is independent per corner (border-top-left-radius, etc.) for asymmetric shapes like speech bubbles.
  • Large radius on small elements reads as pills; concentric radii (inner + outer) keep nested corners visually aligned.
  • border-radius clips background and border but overflow: hidden may still be needed for child content that bleeds square.
  • Tailwind rounded-* scale maps to rem values: rounded-full for circles and pills, rounded-lg for cards.