GUI Border Mode

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! :smile:

330 Likes

Custom border radius when? This is actually kinda cool.

78 Likes

This topic was automatically opened after 15 minutes.

when inset makes gui sizes actually accurate :weary:

40 Likes

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.

32 Likes

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

7 Likes

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

8 Likes

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.

5 Likes

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

21 Likes

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

CircularBorderMode
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!

17 Likes

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

3 Likes

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.

3 Likes

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.

13 Likes

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)

8 Likes

How do these “impact an object’s children”

1 Like

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.

5 Likes

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

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.

Nope, see @TheCarbyneUniverse’s reply

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.

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

Make a feature request!

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

7 Likes
8 Likes

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

6 Likes