GUI Border Mode

[WallsAreForClimbing (Climber)]

Hey Developers,

We’ve just enabled an awesome new feature for you!

Presenting BorderMode: This property allows you to customize how GUI borders are rendered and their impact on an object’s children. There are three different modes to choose from:

• Outline: The border starts from the edge of the object and goes outward. This is the current behavior.
• Middle: The border starts from the edge of the object and goes both inward and outward. Additional padding is added by the border.
• Inset: The border starts from the edge of the object and goes inward. Additional padding is added by the border.

Enjoy!

[Qxest (Suufi)]

Custom border radius when? This is actually kinda cool.

[Rhaoke]

when inset makes gui sizes actually accurate

[SenseiWarrior]

This is great, but will this ever become more customizable by allowing developers to configure a value from 0-1 similar to AnchorPoint? Outline would be 0, Middle would be 0.5, and Inset would be 1 for example.

[SushiiDeluxe (Rovert)]

Pretty neat! I personally have never utilized the border feature on my GUI. Does this also work for circular GUI elements?

[ScytheSlayin (akorn)]

Ooo! When can we make custom ones with decals or something?

[Zeustice]

A neat addition that can definitely help with creating cleaner UI. Looking at this as a stepping stone though hopefully toward features such as radius control on frames and other UI objects.

[rachjumper (rach)]

Can we see border transparency separated from background transparency too? I’d use borders more if I had more control over them.

[TheCarbyneUniverse (Carbyne)]

I assume you mean this when you say “circular GUI elements”:

If so, this does not really work. Borders in Roblox always wrap around the rectangular bounds of a UI element. However, I’d love to see a feature added where borders can wrap around image alpha!

[fivefactor (factor)]

Very useful feature. I may finally start using borders now that I can customize its behavior.

[blushclips (blush)]

I don’t know if this is a gateway to anything, but if it is I highly would recommend the thing that most people want added to Clip Descendants where it clips the image of an imagelabel/button if chosen. Also, the funny thing is that the other day I was wishing ROBLOX had an inset instead of outline.

[Automationeer (Eleanor)]

Will we ever get native rounded borders?
I see very few games use any of Roblox’s built-in UI— it’s just transparent Text and Images.

[Mariofly5 (George)]

@TheCarbyneUniverse

Borders in Roblox always wrap around the rectangular bounds of a UI element. However, I’d love to see a feature added where borders can wrap around image alpha!

So I had a thought about this. Is there a possibility of the borders obtaining their own ZIndex property? While the use case of this would probably be minimalistic at best, with this new feature in mind, you can probably create some very visually pleasing effects with the borders while also keeping its contents covered by the outline (rather than the circle over laying it slightly on the edges as seen in the photo). For example, a button could inset its outline when clicked, and even better, if @Qxest 's thought about custom border radius was implemented, then we can adjust it to move slightly. (really hypothetical and probably not practical but just a thought meme)

[SelDraken]

How do these “impact an object’s children”

[sparker22]

Probably need a dedicated border object so we can have a place for dedicated properties like
BorderMode
Border Top, Bottom, Left, Right
Border Radius, Color, Texture etc for all sides.

[WallsAreForClimbing (Climber)]

I noticed a lot of you have asked some questions, I’ll try to answer them as best as I can.

@SenseiWarrior

This is great, but will this ever become more customizable by allowing developers to configure a value from 0-1 similar to AnchorPoint? Outline would be 0, Middle would be 0.5, and Inset would be 1 for example.

We have no plans to add this right now, is there any reason you want to be able to do this? You can achieve a similar effect right now by parenting one GuiObject into another. The inner GuiObject would have a BorderMode of Inset, and the outer GuiObject would have a BorderMode of Outline.

@SushiiDeluxe

Does this also work for circular GUI elements?

Nope, see @TheCarbyneUniverse’s reply

@rachjumper

Can we see border transparency separated from background transparency too?

Since the transparency of the border is tied to BackgroundTransparency it is difficult to add this and remain backwards compatible. I’ll have a think about this since I’ve seen users request it before.

@SelDraken

How do these “impact an object’s children”

The children will be padded by BorderSize when using BorderMode Middle or Inset.

@Mariofly5

So I had a thought about this. Is there a possibility of the borders obtaining their own ZIndex property?

@ScytheSlayin

Ooo! When can we make custom ones with decals or something?

Make a feature request!

@ElliottLMz

Will we ever get native rounded borders?

@Qxest

Custom border radius when?

This is another commonly requested feature. See the following response:

@0xabcdef1234

We are currently deferring on this, and hopefully the devices distribution shifts through the time that we are confident about shipping this without bring too much performance issues on low-end devices. Or we find out better solutions that does not involve too much GPU stress on those devices.

[Automationeer (Eleanor)]

@ComplexGeometry

Make a feature request!

GuiObject.CornerRadius

This would add a border to each edge of the object with the set radius. You can do this with 9-splice GUIs (which is coming out soon), but that requires loading images. I believe adding this property would add a lot more flexibility in what the robloxs GUI system can do. EDIT: Changed the name from BorderRadius to CornerRadius.

New Properties for GUI Elements

As a Roblox developer, it is currently too hard to design user interfaces using the given Roblox properties. Roblox is missing quite a few properties for frames, inputs, images, and buttons that are considered essential for user interface design. Some of those properties include: BorderRadius - Allows the corners of frames, inputs, images, and buttons to be rounded. BorderStyle - Allows for the border style to be either solid, dotted, dashed, or double. BorderColor3Top - Sets the border color…

New UI Corner Roundness Property

Main: As a Roblox developer, it is currently a huge chore for me to round borders in photoshop and have to export it and import it to Roblox then put the assets into the game. What if I need a whole other frame with a different radius? I have to do that whole entire process all over again just to get that out of the way. Then this leaves me less time to work on more important aspects of my game. [NewFeature] What we need: Speaking on behalf of myself and the rest of the UI designing communi…

GuiObject.BorderRadius Property

A feature to round the corners of a GuiObject. Similar to the CSS attribute “border-radius”. I’d guess the accepted values would be a float from 0 to 1.

[GGGGG14]

Yay, as a 4 year Roblox GUI designer, I will finally possibly utilize the borders Roblox has for me! Border Mode is awesome! I feel like we often neglect these smaller aesthetic components of Roblox Studio and API and company developers are finally addressing them.