Creating even UI borders using AbsoluteSize

[NinjoOnline]

I’m trying to get an even border on my button. While in theory easy, I run into a few problems that erk me.

1. Using scale. If I set the inner of my circle to 0.9, 0, 0.9, 0, yes it creates a nice even border around, but when I say use MouseEnter to increase the size of the original circle, the border becomes bigger (as it’s scaling to the parent object)
2. Solution, use Offset right? NO! Using an offset of say 14 once again, looks nice, and yes, increasing the size of the circle keeps the border the same size, it creates more problems when on small devices, such as mobile

So my solution/idea was to code in using the AbsoluteSize of the button to set the size of the inner, so it’s a constant size across every single platform

Inner.Size = UDim2.new(1, (10 - Button.AbsoluteSize.X), 1, (10 - Button.AbsoluteSize.Y))

However, I’m not entirely sure how to properly lay out the numbers to get it right

*I’ve put this in scripting as it pertains more so to the code, rather than the design aspect itself

[VegetationBush (FartedWayTooHard)]

Please post a video, it would help a lot. Or at least another picture. And to fix that, I think 9 slice would be the solution.

Sort of a good video: https://www.youtube.com/watch?v=ga9iZ-BMgjY

[NinjoOnline]

Not a 9slice problem.

As you can see, there is a 14 pixel difference between the inner and outer circle

And it stays the same right here.

But I can’t just do
1, -14, 1, -14
as that on mobile would look like this

Which is way too thick

[Elttob (dphfox)]

You don’t have to use Offset for this; here’s how I might approach it with Scale. Consider this diagram;

Normally, since the padding is relative to the outer-size, when you increase the outer-size, the padding will also increase to ensure that the ratio of padding to outer-size is conserved. More specifically, when the outer-size is scaled by a factor, the padding will also scale by the same factor:

To offset this, when we change the outer-size, we should inversely change the padding so that the absolute size of the padding stays constant, which can be done by simply scaling by the reciprocal of the scale factor:

From the padding, you can simply find the size of the inner circle by taking 2 padding away from 1 (which represents the full size of outer-size in Scale world):

new-inner-size = 1 - 2*new-padding

Hopefully that helps

[NinjoOnline]

Here’s what I got in the end kinda, it works for both circles, plus rectangular frames. It uses offset tho. Not sure if there’s a cleaner way to do this however, but it looks good on all screen sizes. Basically I get the players screen size to determine the appropriate border size (that was no matter what size/shape the frame is, the border is continuous amongst all UI elements) and then just take that number from the frames size and boom!

RoundNumber is used purely to turn the number into an even number (so no like 5, 7, 9, etc…) as odd numbers can’t be properly centered

return function(screen, parent)
	local BorderSize = screen.AbsoluteSize.X / 100
	return UDim2.new(0, RoundNumber(parent.AbsoluteSize.X - BorderSize), 0, RoundNumber(parent.AbsoluteSize.Y - BorderSize))
end

EDIT Nvm, I’m gonna get problems, as I edit the size of the parent frame, but the inner stays the same cause it’s offset anyway to make this with scale then