Radius
Figma
Guidelines
Web
MobileRadius in design refers to the curvature of corners in UI elements such as buttons, cards, input fields, and containers.
It’s a critical aspect of styling that can influence the overall feel of the interface—ranging from soft and friendly with larger radius to sharp and professional with smaller radius.
Proper use of radius enhances the visual appeal, contributes to a design’s consistency, and can improve user experience by making interfaces feel more approachable and modern.
Guidelines
Correct / Incorrect
Children elements must have a smaller border radius than their parent.
Children elements with a bigger border radius than their parent leads to a bad design and must be avoided.
Takeaways
-
By default, each element should have a border radius greater then 0
-
Element without border radius should not have children with border radius
Usage
Implementation
Properties
Radius
Type : CSS Variable