Get All-Access

Master Corners in UI Design

Feb 24, 2025

2 min read

We all know there’s no UI design without corners and the type of corner radius you use in a design affects its overall vibe.

In this article, we’ll help you master corners in UI design by understanding how rounded edges impact aesthetics, usability, and accessibility and make interfaces more visually appealing and functional.

Formula for nested corners

Use this formula for most nested corner use cases:

Outer corner radius – Padding = Inner corner radius

A side-by-side comparison of incorrect and correct corner radius usage in UI design. The left side shows a red X with the same inner and outer corner radius, while the right side has a green checkmark, demonstrating the correct method of subtracting the inner radius from the outer radius.

Types of corner radius

Sharp: Clean, modern, minimalist, serious, professional
Slightly Rounded: Common, safe choice, a blend of strict & gentle
Medium Rounded: Friendly, versatile, not serious, approachable
Fully Rounded: Playful, inviting, warm

A comparison of button designs with different corner radii. It displays four variations: sharp, slightly rounded, medium rounded, and fully rounded, helping designers choose the right corner style.

How to achieve a playful look

To create a playful look, use corner smoothing. Take a closer look at what happens in the image below.

A before-and-after comparison of a button design with corner smoothing applied. The image highlights the subtle changes that occur when corner smoothing is enabled, using a magnified view.

Corner smoothing in Figma

To apply smooth corners in Figma:

Find the corner smoothing tool in the rounded corner toolset.
Increase the value to achieve softer, more fluid edges.

Conclusion

To truly master corners in UI design, designers must carefully consider corner radii to influence both aesthetics and usability. Whether aiming for a professional, friendly, or playful feel, selecting the right corner style enhances the overall user experience. By using proper formulas and tools like corner smoothing in Figma, designers can craft visually cohesive and accessible interfaces.