UI border transparency should be independent of "BackgroundTransparency"

As a developer, making a nice UI isn’t easy and keeping it unique without compromising its looks isn’t a walk in the park.

Heres a picture of a UI with its borders independent from the background transparency.
image
It looks really clean in my opinion, but to create this effect you have to add 4 more frames in the original frame, then position them around the edges.

It would be nice if we could create this effect without having to go to such lengths.

The solution would be: Add another property to UI objects called ‘BorderTransparency’.

Will this be dubbed as “Border Independence day” where borders declared their independence from BackgroundTransparency?

69 Likes

IMO this should be done with a 9sliced ImageLabel instead of yet more proliferation of properties on the GUI objects. There’s already way too many properties jammed into them. You can even put all of your slices on the same sheet and restyle your entire UI with one image change that way.

Such a property would also be exceedingly awkward given that it would have to be backwards compatible: If you set BackgroundTransparency it would also correspondingly have to update the BorderTransparency property creating an ugly hidden dependency that any Plugin / tooling would have to be aware of. As someone who’s made their fare share of plugins I can tell you that this is exactly the kind of thing that would be a huge headache to deal with.

2 Likes

As a developer who designs UI often, I find it annoying that I don’t have more control over the border of a UI element. I don’t see this being something that would be hard to add. I would love to have control over the border transparency. Right now, if you adjust the Frame transparency, it makes both the fill and border transparent. So I can’t do things like:


Fill 0.75 transparency

Border 0 transparency (solid)

or

Fill ‘1’ transparency

Border 0 Transparency (solid)


Because of this, I have to then make the border in Photoshop, upload it as a decal and then make sure I set the proper thickness on the outline in the image. It’s pretty frustrating to deal with.

This would help improve the workflow of designing UI because I wouldn’t have to go into PS to make outlines for my UI elements, plus I would have control over the border thickness keeping consistency.

21 Likes

Hi. So, something that does sort of annoy me is that when you turn a UI object in Roblox Studio transparent, the border is also transparent. As a developer, I feel that there should be a feature specifically being that when you turn a UI object transparent, the border should still be visible unless if you want to make the border transparent as well, there should be a property that if you want the border to also be transparent, there can be a seperate property for that. If the user wants to make both the fill and border visible, maybe there can be another property for both the border and fill of a UI object to be visible or transparent.

In an external program/software such as Adobe XD, if I make a quick square, I can only see the border if you have a white artboard. In Adobe XD, it’s up to you if you want the border visible and the fill transparent.

Here’s how Adobe XD’s fill and border properties are:
image
As you can see, both the “Fill” and “Border” properties are checked off, meaning they are both visible.

Here’s how the square looks like on a black artboard with the fill transparent and the border visible:
image

So if this request can be fulfilled, it would definitely be nice to have a feature like this and would be helpful for developers for sure.

Thank you and have a great day.

8 Likes