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

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

rounded-400

12px

radius-500

rounded-500

16px

radius-full

rounded-full

9999px