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.
When to use it
- Define a product-wide corner scale
- Differentiate compact controls from large surfaces
- Support a precise or approachable tone
When NOT to use it
- Mix sharp, round, and pill shapes without a reason
- Use the same large radius on every box
- Let nested rounded corners collide
- Use corner shape as a substitute for information hierarchy
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!
Further reading