Primary button (M3 Small)
- Input
- Botão 120×40px
- Expected output
- border-radius: 8px;
Material Design 3 Small token. Suitable for primary action buttons.
responsive CSS border-radius buttons
Border-radius for buttons and cards: the right choice for each scale
Established design systems such as Material Design 3, Tailwind and Radix UI define specific radius scales for each component. The general principle: smaller elements (chips, badges) use larger percentage radii; larger elements (modals, panels) use fixed px. Consistency in the radius scale is as important to visual identity as the color palette.
Radius scale in design systems
- Tailwind uses a 7-level scale: `sm` (2px) → `xl` (12px) → `2xl` (16px) → `3xl` (24px) → `full` (9999px). Material Design 3 uses categorized shape tokens: Extra Small (4px), Small (8px), Medium (12px), Large (16px), Extra Large (28px), Full. Aligning your application to one of these scales makes the result visually coherent without conscious effort.
- Pills (border-radius: 9999px) work best for variable-width elements like tags and badges. For fixed-width buttons, radii of 6–12px tend to age better than pills or perfect squares.
Radii by component type
Modal/Dialog (M3 Extra Large)
- Input
- Dialog 480×320px
- Expected output
- border-radius: 28px;
Material Design 3 Extra Large token. Suitable for medium-size surfaces.
Full tool FAQ
It's the property that rounds the corners of an element. It accepts values in px, %, rem or any CSS unit, and can control all four corners independently.
Frequently asked questions
What border-radius should I use for cards?
For cards, 8–16px is the most common range. M3 recommends 12px (Medium). Tailwind recommends `rounded-xl` (12px) or `rounded-2xl` (16px). The choice depends on the overall interface scale.
Should I use px or rem for border-radius?
For visual interface corners, px tends to be more predictable because the radius does not change with font zoom. For elements that should scale with user preferences, rem is more accessible.