This is the problem. One side has 3 pixels gap, the other 4. Only 1 pixel, yet I can still see it without being zoomed in and it just looks really off. How can I get it to be perfect on all edges. You can seen in studio all I did was create 2 circle icons, have one inside the other, and the inner one be
{1, -5, 1, -5} and positioned in the centre. So it should be in the centre.
This is a quite interesting issue as it has to do with how pixels work.
What’s going on?
A pixel is the smallest visible object on a screen, attempting to make something smaller than a pixel is not possible. With this in mind, let’s take a look at what’s going on here.
Currently, your total borde size is -5, an odd value. Since your instance is anchored to the middle, this will create a border of 2.5 pixels. See the problem? Since one pixel is the smallest visible object on a screen, that 0.5 can’t go anywhere! Roblox solves this by selecting a random side to gain one extra pixel, breaking the dillema.
Let’s fix this!
As seen in the example, the number 5 creates this dillema. The numbers 7, 9, 11 and 13 also cause this issue, in fact, every single odd number creates this dilemma. To resolve this at last, just change it to an even number! Yeah, it’s that simple.
