The Rounded Corner Correction – 1

Excerpt

How to calculate radius for the rounded corners when drawing icons with obtuse and sharp angles?

Thanks to

@IpNeNaEcRe

The problem

For a long time, a problem kept confusing me when I was drawing icons. Many design systems set out their rules for icons with rounded corners, but only for the condition when angle equal to 90 degrees. When I try to set corner radius for obtuse angles and sharp angles, they become unsuitable.

If I set the same radius for angles smaller than 90 degrees, it looks too big. In the opposite, it seems too small. We can find the simplest example in an obtuse triangle:

When I tried to make some correction on the radius to let them looks same visually, I find they may be following certain rules which can be calculated by a formula. But this problem keeps annoying me for over a year. Luckily, last night when I asked the question in the Anyway.fm WeChat Group, a cool guy called @IpNeNaEcRe give me a perfect answer and a tool for calculating the radius.

The solution

His solution is to keep the Arcs in the same length.

Here’s the formula for calculating the rounded corner radius: (S is the length of the arc, α is the angle between two lines, and r is the corner radius. S1 should equal to S2.)

And here’s the former triangle with rounded corner correction, it looks more comfortable now:

Furthermore, he gives us Excel as a tool for calculating. You can enter the radius for 90° in the red cell, and it will calculate the other radius automatically. You can also enter the α value in the grey cell if it hasn’t been listed on the table.

You can download it here:

55 KB | Google Sheet

Leave a Reply