How to choose the corner radius for web interface?
04 Feb 2021 1 min
While designing the UI element for your new project corner radius used in design might have a big impact on the overall feeling from an interface.
1. 0px Radius
This options mainly express serious and professional-feeling of the company.Being consistent with no corner radius mean clean components, sharp geometrical alignments and balance of all components. Following meaning is convey:
pros:
- Professional
- Clean look
- Organized
cons:
- Conservative
- Corporate felling
- Reserved
2. 3-4px Radius:
This is the most safe choice. It’s standard across multiple fields, express a little bit of accommodating. friendly, still a professional look.
pros:
- Safe choice
- Friendly
- Professional
cons:
- Not so innovative
- Conservative
3. 6-12 px Radius
If you are looking for innovative, friendly and a new tech design. This range will address you need and is very trending style.
pros:
- Trendy style
- Innovative
- Playful
cons:
- Might look infantile
- Might look messy
4. Fully Rounded
Fully rounded corner are fairly common across the user interface. The biggest advantage is that they are easier on eyes, but the styles could be little bit problematic for some component like dropdowns text-fields etc.
pros:
- Easier on eye
- Friendly and creative
cons:
- Little bit problematic for text fields etc.
- Might look like tags