Oh no, border radiuses

While scrolling through Twitter yesterday, I noticed that many business profiles had rectangular profile pictures. However, there seemed to be an issue with the border radius of these pictures. Can you spot what's wrong with them?

#The problem

Have you ever come accross a design where everything appears to be perfectly executed, only to realize that the border radius of the inner and outer elements are not aligned? It can be extremely frustrating to come across this kind of inconsistency, don't you think?

As a UI designer and developer, I know how challenging it can be to get the border radius to align perfectly, especially when striving for a nice designs. In this article, let's explore some of the reasons why misaligned border radius can be frustrating and discover ways to fix the issue.

• It just doesn't look good. It creates an imbalance in your design that can be really distracting once you notice it. Of course, once you've noticed it, you can't unsee it.
• It can break the design. If they are misaligned, it can completely ruin the look and feel of the thing you are trying to create. It's frustrating to put all that time and effort into something only to have it fall apart because of a small misalignment.
• It can be tough to fix. In some scenarios, you just can't get it right; you keep trying only to mess it up more and not know how to fix it.

#The solution

Did you know that you can actually calculate the right border radius for your design? I know, I was surprised too when I first heard about it. It's super important for creating a cohesive and professional look. When you have all of your border radius aligned just right, it solves all of those issues we talked about before and adds a level of consistency to your design. (I wrote a blog about consistency, definitly worth the read)

#The math

To calculate the correct inner or outer border radius, you only need two pieces of information: the radius itself and the distance between the two items. With these two pieces of information, you can use simple math to find the correct border radius.

For the inner radius:

Outer Radius - Distance = Inner Radius

For the outer radius:

Inner Radius + Distance = Outer Radius

#Example