Corner Feel

You might say

Make the corner rounding consistent across the site—some parts are square and some are round.

Use corner shape to support the product's visual toneSharp, softly rounded, and pill-shaped corners can make a page feel different, but the effect comes from consistent use across the system. Choose a small radius scale that fits control sizes and content instead of rounding every object the same way.
Button Right angle · Clear edge Button Smaller rounded corners Button Larger rounded corners ButtonCapsule outline

When to use it

  • Define a product-wide corner scale
    Smaller-radius cardSave
  • Differentiate compact controls from large surfaces
    Try it nowL
  • Support a precise or approachable tone
    Larger-radius cardFollow me

When NOT to use it

  • Mix sharp, round, and pill shapes without a reason
  • Use the same large radius on every box
    Evergreen Bank · Large transfer
    Transfer now
    A button outline that differs too much from other controls can weaken overall consistency.
  • Let nested rounded corners collide
    Large-radius cardLarge-radius inputLarge-radius buttonUsing the same prominent radius at every level makes component roles harder to distinguish.
  • Use corner shape as a substitute for information hierarchy
    Value AValue BValue C
Anatomy
Radius is 0; works with border, weight, and spacing to create a stronger outline
A smaller radius relative to component size, suitable for interface elements that need to retain a sense of edge
Radius is a higher proportion of size; check with component proportions and spacing
The radius is at least close to half the height, forming the shape of arcs at both ends
Variants
Sharp
When edges need to be clear or consistent with an existing right angle system
Subtle
When you need to preserve the edge while slightly softening the outline
Rounded
Component size allows for more pronounced arcs when coordinated with other roles in the system
Pill
When long labels or buttons require complete arcs at both ends
Typical use cases
Design system
Review of large transfer To be confirmed
PayeeHengsheng Trading Co., Ltd.
Amount¥ 500,000.00
Buttons and inputs
New reimbursement form ×
Cards and dialogs
Weekend Hiking · Unkai Line
23,000 people want to go · Difficulty ★★
Ideal Workplace Award
8,412 people viewed · Home
Tags and pills
Bean
3 minutes ago · Parent-child paradise
Lv.6
I finished building an entire dinosaur castle today, which feels so fulfilling!
Further reading
border-radiusMDN ↗