Is there a way to outline UI's with invisible backgrounds?

Help and Feedback Art Design Support
#5

You could make an imagebutton, of just the text and outline, with the background transparent. Then you just change background transparency (NOT image transparency), and the background would get more/less transparent, but the outline/text would not?

#6

This method has already been suggested.

#7

Well then what’s your question if there’s already a whole property to solve it?

#8

I thought of that too; however, an image as a border rescaled for other devices inevitably makes the image quality low. Additionally, the size of the border will be different across platforms.

#9

Use aspect ratio constraints to make it the same across devices

Edit: There will not be a perfect solve for this, you will have to settle or think of something :man_shrugging:

#10

I’m well aware that I’m unclear, I’ll do my best to explain.

My question is if there’s a way to make something like the following,

image

Outline a button with the background invisible. When you either hover or click the button, the button will be filled in.

I’m just as confused as you,

The border property seems to only apply when the background is visible. I’m asking if there’s an alternative way to add a border with the background invisibility set to 0.

#11

Oh yes! Make a localscript in the button and do this:

local button = script.Parent

button.MouseEnter:Connect(function()
    button.BorderSizePixel = 0
end)

button.MouseLeave:Connect(function()
    button.BorderSizePixel = 1
end)

button.MouseButton1Click:Connect(function()
    button.BorderSizePixel = 0
end)
#12

I’ll consider your suggestion for my future projects.

If there is no conclusion in Roblox Studio, I’ll write a feature request.

1 Like
#13

Create a white frame, black button(set the Zindex higher) and when clicking the button turn it to white.
Or maybe a more simple way that I don’t know.

#14

That’s not what I’m looking for.

The following gifs/videos should clear the clouds,

CTA_3 unnamed

#15

Sorry, that’s not what I’m looking for either.

I hope these gifs will clear your misunderstanding,

#16

I can understand the shiny one. Tween the button’s transparency and also tween an UIGradient.
This should help you

#17

I don’t have plans to use gradients now; however, I’ll consider your option for my future projects.

#18

Are you talking about “removing” the outline when you hover/click? Just set the border colour to the colour of the fill.

#19

make the lables backgroud the same color as the backgound

#20

You would have to make the BackgroundColor3 the same color of the background and script the button to change color when it’s hovered because there isn’t an official way to do this in studio

#21

This is good to use when using a plain colour background. I’m definitely putting your option to use for the future. However, I commonly use borders on transparent backgrounds; this is my question.

Here are some images,

image
image862×568 85.1 KB

#22

Unfortunately, Roblox Studio doesn’t have the ability to do that.

You could create a band aid solution however. You could make frames a child of an invisible frame (transparency 1) and resize and position them to look like borders.

Edit:
For anyone seeing this in the future, Roblox has currently released a UIStroke beta feature that gives off this effect:

cc @Inspirre

2 Likes
#23

There is a beta feature now (You can’t use it in-game just yet, only in studio) called UiStroke. No idea when it will be released, but it allows you to create Much more customizable borders than before, and even have rounded borders. It is actually only around the edges, so a transparent background with it will just be the border. Sorry for the extremely late reply xd, but hope this helped anyway!

1 Like
#24

Too bad that has the same transparency issue still ;-;