Border Radius
The rounding applied to the corners of an element.
Plain English
Border radius softens corners, shifting a component's personality from sharp and technical to friendly and modern. Small values (4–8px) feel professional and precise. Medium values (12–16px) are the current default for cards and panels. Large values (24px+) read as friendly or playful. Full rounding (9999px) turns rectangles into pills and circles.
Technical
The border-radius CSS property sets the radii of the ellipses that define the curvature of the four corners. It accepts 1–4 values (top-left, top-right, bottom-right, bottom-left shorthand), length or percentage values, and supports asymmetric x/y radii via the / syntax. Renders outside the border edge; overflow: hidden clips child content.
Live Demo
0px
Sharp — engineering tools, data tables
4px
Subtle — inputs, professional UIs
12px
Modern — cards, panels, modals
9999px
Pill — badges, avatar circles, buttons
Same element — only border-radius changes. Each value sends a different personality signal.
Usage
✓ Good usage
Use 12px radius on cards and 4px on form inputs for a consistent, modern look that feels polished without being playful.
✗ Bad usage
Mixing 4px on cards with 20px on buttons creates visual inconsistency — the radius scale should feel like a system.
Recommended values
- 0px — sharp, data-dense, engineering tools
- 4px — subtle, professional (form inputs, table cells)
- 8px — modern default for small components (badges, chips)
- 12–16px — cards, panels, modals
- 20–24px — prominent UI elements, hero cards
- 9999px — pill buttons, avatar circles, tag badges
Common mistakes
- Using different radii on every component with no system behind the choices.
- Applying large radius to elements that also have overflow: visible — child content bleeds past the corners.
- Forgetting that a pill button needs the radius to exceed half its height (use 9999px, not 50%).
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use a 12px border radius on all cards and panels, 4px on inputs and table cells, and pill-shaped buttons (border-radius: 9999px).