UX Tip #6: Perfect nested rounded corners

This UI design tip will help you create perfect nested rounded corners

Pro tip: Use a mathematical formula to calculate the optimal corner radius for your elements

Rounded corners are very much a modern UI design trend. Devices have become more rounded, interface elements are becoming rounder, and dramatic rounded corners is an effect you might come across very often, especially on iOS and Android.

Where is the issue?

If you nest two elements with the same corner radius, you will land up with an optical effect that is unnatural and doesn't look pleasing to the eye.

How do I fix it?

Use the following formula to calculate the perfect corner radius for your inner element.

Inner radius = Outer radius - Outer thickness/2