Scaling Border Outline

I’m trying to scale the border outline size to looking the same on all screen sizes

The border outline size does not scale when the screen size / frame size is changed

thus bigger screens appear to have a small outline and smaller screens have a large one

How it should be on all screens

image

how it is on large and small screens

image

image

I tried to use images but it turns out worse

image

Orginal Image

square

as you can see the imagelabels and the image I used don’t match up

I’m looking for a formula I can use to scale it properly

if anyone has a different method to fix it let me know

3 Likes

It’ll be a little more hassle, but perhaps you could use one gui object for the border and one for the contents?

Certainly not ideal but it may work.

1 Like

Could using a UIAspectRatio constant fix this? That tries to ensure that UIs are the same scale on all screens.

There are also so handy plugins that can automate making these for you, if you’re interested.

If you’re 9Slicing it, the areas outside the slice will not scale.

I’ve already been using UIAspectRatios it’s just that borders will not scale period

and with using images the quality seems to get worse the smaller it gets

Yeah, that would definitely work, if I don’t find another method I may have to use that

Is it only the ImageLabel you’re having an issue with, or is it the whole Gui? If you’re experiencing such sizing issues with the rest of your Gui, it’ll most likely be because you’re using offset properties over scale. If it’s only the background image, you should take a look at 9-Slicing.

Really couldn’t figure out how to make it scale correctly, and even without the Outline the squares would squish even with constraints so I just re made it in a similar style

scales very nicely, and it looks nicer (to me at least)

https://i.gyazo.com/a07b4c1e4ad3795292c666ff0d33d421.gif