Don't be so simple-minded at adding borders to your UI


While working with UI in Roblox, do not ever just paste a copy of a rounded frame and increase the size so it will be a border for it. It will be problematic and will be very obvious at a larger scale.

While this does not actually ruin the overall UX for your UI, this still should be followed no matter what, as this is about consistency.

Let me just give you a demonstration to let you know what I am talking about:

You can see that the rounded part’s border size is not equal to the rest of the border, this is due to how corner radius works.


Let’s assume you have a 90x90 rounded frame at 16 pixels, and you duplicate the frame, but you make it larger by every time you duplicate it. You will see the corner radius will not be the same as the original frame:

This is also the same when you make frame smaller:


To fix the rounded border issue, all you need to do is use this formula:

O = C + B
where O equals to the border’s corner radius, C equals to the frame’s corner radius and B equals to the border size.



Next time when you are about to make borders for your rounded frame, please apply this formula.
and when someone is not doing it right, direct them to this post, or simply tell them what’s wrong and how to fix with the formula.


Hopefully this will help you :slight_smile:

71 Likes

Definitely not guilty here :sweat_smile:

All I do is look at it visually to see if the corners are funny and if so, adjust the CornerRadius. But thanks for bringing this up, I guess there was a better way after all.

3 Likes

I use 9-sliced circles for pretty much all my GUIs. How would this apply to them?

1 Like

It’s pretty much the same, but you have to change the SliceScale.

1 Like

Pretty neat and well explained. Very easy to understand.

It definitely reminds me of some 3D mathematical rounding and more complex geometry/ aspect ratios.

1 Like