As a Roblox developer, it is currently too tedious putting together precise UI that uses UIStroke instances. The reason for this is because it lacks a way to control how the stroke is positioned. Since it’s always outside of the parent object, it becomes problematic when using any kind of frame that clips its descendants, like scrolling frames. If developers could set a property like BorderMode on UIStroke instances, this wouldn’t be a headache:
Right now, UIStroke instances technically only have BorderMode.Outline and only one workaround to get something like BorderMode.Middle and BorderMode.Inset. This workaround requires the usage of an invisible frame that’s resized based on the UIStroke’s Thickness. What’s worse is that you even need to adjust the CornerRadius of the UICorner instance (if you used one) based on the Thickness as well:
Here’s what this looks like using a ScrollingFrame, which clips its descendants:
I was thinking about this last year, but I had assumed it was already a feature request. I’m surprised it has taken this long for one to be made about it. It was however mentioned twice (1, 2) on the UIStroke announcement.
If Roblox is able to address this issue, it would improve my development experience because I wouldn’t need to constantly use a tedious workaround to have UI objects with UIStrokes that don’t get clipped.
I also have same issue with ui lists or grids and borders cutting out. It’s tedious wrapping scrollable ui on some other frame that clips descendants and calling it a day.
It’s just inconvinient to do what am i doing to prevent borders cutting out.
Would be really nice to have an easier way to do outlines on circular UI elements right now.
Currently the only solution is to have a frame the size of the object plus the outline, with the actual frame inside.
I’m currently stuck with the exact same problem and the solution is really hacky code.
I have a frame has UIStroke and UICorner but if I need to make the BorderMode inset instead of outline I would need to create another frame which is the offset from stroke’s thickness and then change the UICorner to be negative of the stroke’s thickness which ends up with a setup like below
This setup is really unintuitive and hard to pull off when having many GuiObjects needing an inset stroke and prevents me from effectively using UIStroke.
If such a simple property is added to combat this it would greatly improve how I use strokes.
As of right now, I believe the most efficient way to do this, (if you wish to see the changes live), would be to add a UIStroke, then subtract the thickness from both the width, and the height of the frame. For example: If Thickness = 12, then the size should be {0.5, -12, 0.5, -12} assuming 0.5 is the size you chose for your frame. If that is too much work for you, you can add a LocalScript to the UIStroke element with the following script:
local Border = script.Parent
local Frame = Border.Parent
local function adjustSize()
Frame.Size = UDim2.new(Frame.Size.X.Scale, Frame.Size.X.Offset - Border.Thickness, Frame.Size.Y.Scale, Frame.Size.Y.Offset - Border.Thickness)
end
adjustSize()
Border:GetPropertyChangedSignal("Thickness"):Connect(adjustSize)
This along with UIBlur would be so extremely helpful, but won’t be happening anytime soon
These features have been highly requested for around 4+ years and have’t been added. Roblox doesn’t care enough at all tbh to do anything useful for once.
Edit: And when I say UIBlur, I’m referring to the ability to blur UI Elements, not just the screen.
