Welcome Stranger, I hope you have an amazing day! Grab something to drink or eat and let us dive in.

This will be a quick guide on the art of square bending aka radius nesting.

How difficult can it be?

Every day we do feedback on our platform and see 100+ designs. But there’s always this one person/design that has the same issue. The radius nesting.

So I thought to address this issue once and for all.

Let me give you examples first. A good one.

I went ahead and recreated this design from one of our community members in Sketch to see if the nesting is okay. Just the bottom part, of course, that’s enough for this article.

This is probably perfect, it’s hard to tell if you don’t recreate it. If you look at it just like this it’s either perfect or it could be 1pt up or down. BUT it is certainly good!

Now, the other example.

See this radius nesting isn’t done properly. Since with a bigger radius inside than the outside, the padding looks uneven, even if the software shows the same numbers from the sides. Visually it just looks off.

The secret formula

There is this TOP secret formula that only 1% of the designers know about it goes like this.

Inner radius = Outer radius — padding

So if we apply this to our button. It will look like this.

Tiny detail, but now it looks equal from all sides. See for yourself without the guides.

It doesn’t work!

So the above is mostly known stuff. But what if the result is 0? Well, then there are two solutions.

First: You invert the formula. So now it will be

Outer radius = Inner radius + padding

Second: You “eye” it. Yes, you train your eye to see the value. So if the result is 0, then you round the corners of the inner radius to something between 1–4 usually.

This isn’t a rule set in stone, it can be 8 it can be 7. As long as it looks visually the same from all sides it works!

Let’s try it together! Make the two rectangles and have 24pt between all the sides. Then round the corners of the bigger rectangle to 24 and the inside to 0.

Let’s see how 4pt looks.

Now let’s bump it to 7pt.

And now let’s try 5

You see, to my eye, the 7 and 5 probably look the best, and it also might be something in between. It’s better to not look at this for hours or you might go insane.

Just enter a number you feel like it’s good and come back to it the other day if you’re not sure .

That’s it!

Yeah, it’s that simple. You don’t really need to do anything more than this and have your corners perfect every time! Remember practice makes perfect.

That’s it for today, as always I thank you for your time reading and wish you a beautiful day!

Liked the article? Share it!