Boxes on Corners (UI)

Hello, So I was wondering how some developers achieve the boxes on the corners (How to put corners/outlines or a highlight on certain buttons or more.) I will put an image of what I’m talking about exactly after this text, Although I would just want to know how I would achieve this with efficiency.

Some ideas I’ve gotten which might be what they did but I’m not so sure are:

  1. They put frames as the corner to make a box (Unefficienty but looks good either way?)
  2. They made their own buttons using photoshop or any art and design program)
  3. There is a feature in Roblox I may/may not know about

This is what I’m trying to accomplish:

(All I’m looking for is how a person would make a box/highlight for each corner that looks some sort of an outline.)

If you could help I would be very grateful

I believe you’re talking about the outline on the UI’s right? I personally deactivate for most stuff, but it should be under BackgroundTransparency you should see some outline seetings. I don’t really remember the name. You can change color, size…

Using UICorner deactivates that though! So beware! In that case you would actually have to make two frames and stuff;

Also it seems like the outline respects BackgroundTransparency:

Sorry, If I didn’t specify correctly what I was looking for, or if it was a little confusing. I was looking for which in the corners (as you can see in the image, is highlighted.) I wasn’t looking for the border outlines and more but rather how the corner is highlighted. An image (with bigger box/highlight corners can be represented here):

I’ve been doing UI Design for a while now so I usually understand how most of it works, Although I have an idea on how to do it, I’m not sure which is the most efficient way to do it at all or how they did it in their own way which would make it easy for me to do.

As you can see in the image, The one I highlighted / circled is what Im trying to ask for, In which the button has a square or some type of highlight on the corner itself. It adds that one tiny detail of a button which is what Im trying to do.

As I said I might have ideas such as; 4 singular frames on each corner of the button or them just making the button in photoshop or some sort but I’m not really sure on how they did it unless its a roblox feature.


For example, On what I know right now, is that border outline is specifically for outlining a certain frame, button or any subjectively known item which has a border property. Although I’m not sure how you would add those boxes.

I have ideas on how to do it but I’m looking on how they did it in the first place which is my big question

TL;DR Talking about the corners in which there are boxes/highlight of it, Not the outline of the button itself but an outline of the corners. (Whenever I searched it up it always coming up on how to make a button round which is simply by using UI Corner which is not what Im looking for.)

Oh yeah, I believe that’s not a Studio feature, if it was I would have seen it more; But it is probably a bunch of frames, which is unefficient, but what can you do.

You can make a module and make it do it for you and stuff;

imma try to make one lol

Yeah possibly is a script or just separated frames. (Although I have suspected that some people may have even photoshopped it/used a designer application to make a button like that.) Although who knows.

1 Like

It’s not a script; and it’s not inefficient. It’s through something called 9Slicing.

Don’t reply unnecessarily if you don’t know how it’s done.

Please read this article to learn more:

1 Like

Thank you so much for the info. Hope I could use this for future UI’s im making.

I thank you respectively :smile:

1 Like