Radius

Radius in design is used to round the corners of elements like buttons, cards, or containers. By adjusting the radius, designers can create softer, more approachable shapes, giving the design a smoother and friendlier look. Rounded corners can make elements feel less rigid and more modern, helping to improve the overall visual appeal and user experience. It's often used to create a more polished and harmonious design.

General Concept

There is no Figma style for radii so designers use token values (e.g. 4px) in Figma components and developers use tokens with correct values (e.g. radius-100)

Radius	All breakpoints	Value (px)
radius-0	rounded-0	0px
radius-100	rounded-100	2px
radius-200	rounded-200	4px
radius-300	rounded-300	8px
radius-400		12px
radius-500		16px
radius-full

Controls border radius of an element using the border-radius CSS property.