BorderRadius

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.

When to use it

Soften controls and cards
Create circular avatars
Build pills or tags
Keep a product's corner language consistent

When NOT to use it

Choose a different radius for every component
Round nested boxes so much that their edges clash
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