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.

Radius

0px

radius-0

2px

radius-100

4px

radius-200

8px

radius-300

12px

radius-400

16px

radius-500

9999px

radius-full

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