Equilateral borders for UI objects

I am aware that the size property of the UIObject in the above screenshot does not retain the desired “equal sides” characteristic between aspect ratios; that is the reason I am making this thread. Even if that were to magically work, however, I would not want to have to find this golden ratio manually anyhow.

My question is: Is there an easy way to make a (centrally anchor-pointed) child UIObject fit inside its parent UIObject in a way that makes the “borders” (really just the visible portion of the parent UIObject) of equal length on all sides? The easy answer is to use offset, but I want this effect to take effect on all devices and all aspect ratios. Maybe a formula exists to automatically accomplish this in-script using the Camera.ViewportSize property combined with the offset properties of GuiObject.Size? Preferably a UIPadding could be used so as not to modify the GuiObject.Size property itself.

If this question has already been answered in other threads, please link them, as I don’t even know what terms to use to search for this issue. Thanks in advance.

What you might be looking for is 9Slice, which is a “ScaleType” of ImageButton or ImageLabel.

The border is basically a image, with 9 different parts you can select them manually in the instance’s properties

To explain briefly, this is a image where you can select by “Offset” the corners, and all the rest is going to be stretch (resized) according to the Instance’s AbsoluteSize

For more info, i believe this thread’s Solution explains 9Slices pretty well

GIF Source : 9Slice.rbxm (5.3 KB)


Thank you very much - I found a tutorial on 9Slicing that easily walked me through how to do this. https://pbs.twimg.com/media/COVn4VJWgAAYe-l?format=png&name=large

1 Like