Border Radius
圆角
Aliases:圆角圆角半径为什么卡片看起来不精致按钮圆角胶囊形状border radiusrounded cornerscorner radius
What is it
Rounding a box's corners softens it; the bigger the radius, the more it reads as a card or bubble. Radius must scale with the component — small on buttons, medium on cards, large on containers — so everything looks like one family. Adjacent rounded boxes leave an awkward notch, fixed with concentric radii (outer = inner + gap) or by aligning them flush.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Softening the brand feel while separating cards, buttons and containers
- Buttons, inputs and avatars need one shared rounding language
- Nested containers need concentric radii so inner and outer corners stay smooth
✕ When not to use
- Serious data tables and pixel-aligned grids
- Heavy rounding on a 12px icon just smears it
- Blowing a rectangular card into a pill and losing information density
Variants
Soft
柔和小圆角
4–8px — restrained and professional for tables and dense controls
Rounded
圆润中圆角
12–16px — the usual card and panel step, friendly but not gimmicky
Pill & circle
胶囊与圆形
9999px or 50% — for buttons, tags and avatars
Implementation
border-radius: 8pxborder-radius: 0.5remborder-radius: 9999pxborder-radius: 50%border-radius: calc(var(--radius-md) - var(--space-2))Define four or five rem steps — --radius-sm 4px, --radius-md 8px, --radius-lg 12px, --radius-xl 16px, --radius-full 9999px. Components pick a step by their own size, and inside a visibly rounded parent the child uses calc(var(--radius-lg) - var(--space-2)) to stay concentric. Avatars and switches take 50% or --radius-full. Watch anti-aliasing under 1px borders and inset by 1px where needed.
Platform API
border-radiusborder-start-start-radius50%--radius-lgIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| CSS | border-radius Slash syntax controls horizontal and vertical radii separately |
| Tailwind CSS | rounded-lg / rounded-full Stepped rounding utilities |
| Design tokens | --radius-sm / --radius-md / --radius-full |
Related concepts
A fixed ladder of spacing steps (4, 8, 12, 16, 24, 32, 48px, usually multiples of 4 or 8) that all padding, margin and gap values come from. Drawing every gap off one ruler instead of inventing numbers keeps density consistent, and spacing also signals grouping: the larger the gap, the looser the relationship between elements.
FoundationSimilarShadow depth expresses how far an element sits from the page: 0 rests flat, 1–2 lift, 3 and above become overlays. Each shadow stacks umbra, penumbra and ambient layers — higher levels mean larger, softer casts. Use elevation to describe stacking relations, never as ornament.
FoundationUsed withA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsUsed withA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsUsed with