Border Radius
You might say
Round the sharp corners on these cards a bit so they feel softer.
Round the corners of a boxBorder radius changes sharp corners into rounded ones and helps set the visual tone of controls, cards, and images. Define a small set of radius values and use them consistently. A pill shape works only when the height and content support it.
You can say this to an AI Agent
Audit current border-radius values and consolidate them into a small role-based token set for peer buttons, inputs, and cards. Reserve pills and circles for explicit roles, test varied sizes, and remove unassigned one-off values.
When to use it
- Soften controls and cardsInput control: control tokenContent container: surface token
- Create circular avatarsLSquare + 50% = perfect circle avatar
- Build pills or tagsPill labelPill button
- Keep a product's corner language consistentSmallMid-rangeLarge
When NOT to use it
- Choose a different radius for every component
- Round nested boxes so much that their edges clashA rectangle + 50% = an oval, not a pill.
- Use a pill shape for long, multiline content
- Assume more rounding always feels friendlier
Anatomy
Content
The arc size of the corners, the four corners can be set separately
The rounded corners follow the arc of the border
Not clipped by rounded corners by default unless overflow: hidden
Variants
Small
When you want to retain a clearer edge; select according to component size
Medium
When a balance between edge and soft contours is required
Large
When you need a more obvious arc; first check the content space and nesting relationship
Circle
Square avatar, status point or round icon container
Pill
When long labels or buttons require complete arcs at both ends
Typical use cases
Button corners
border-radius: 12px
Message notification
Dark mode
Card surface
50% perfect circle
Little Fox · 2 hours ago
This rounded corner tutorial is so easy to understand, I have saved it!
Avatar
Front-end entry training camp
Hot Sale
New
border-radius: 999px is the CSS writing method that allows this example to achieve a capsule outline, and is not a fixed value for all components
Tag
Controls with the same visual role use the same radius token
border-radius
box-shadow
flex layout
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