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.
You can say this to an AI Agent
Audit radii by component role, then define a small set of equivalent small, medium, and large tokens. Require reuse within roles, reserve pills for explicit compact actions or tags, and compare the system in real card, input, and button combinations.
When to use it
- Define a product-wide corner scaleSmaller-radius cardSave
- Differentiate compact controls from large surfacesTry it nowL
- Support a precise or approachable toneLarger-radius cardFollow me
When NOT to use it
- Mix sharp, round, and pill shapes without a reason
- Use the same large radius on every boxEvergreen Bank · Large transferTransfer nowA button outline that differs too much from other controls can weaken overall consistency.
- Let nested rounded corners collideLarge-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 hierarchyValue 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
Tags and pills
Bean
3 minutes ago · Parent-child paradise
I finished building an entire dinosaur castle today, which feels so fulfilling!
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check