How do I make UI elements sit inside frames and other elements

Help and Feedback Art Design Support
1

Hi everyone, I don’t really know how to explain what I want the ui to do, however I do have a screenshot that might be helpful.

In this screenshot, you see how the purple bar looks like its actually in the ui and that’s what I’m hoping to achieve

im so sorry i really don’t know how to describe it, hopefully somebody understands :sob:

Unknown
Unknown498×250 71.2 KB

you see how the purple bar is like not outside the ui and it crops perfectly, that’s what i want to do with my ui elements

2

i am NOT good with UI design so i deeply apologise if none of this made sense :sob::sob:

3

Use the “ClipDescendants” property to make the purple bar rounded to look like it is in the black frame

1 Like
4

i tried that, it worked at first and now it doesn’t

5

After a bit I have recreated what you were looking for!

image_2025-09-08_180349292
image_2025-09-08_180349292278×139 27.9 KB

And heres the layout of how it works:
image_2025-09-08_180411261
image_2025-09-08_180411261172×123 2.92 KB

Instead of using a frame to hold all the UI, I used a CanvasGroup, as unlike frames, CanvasGroups will cut out parts of their children even if you use a UICorner.

For Reference, this is without using a CanvasGroup

image_2025-09-08_180556742
image_2025-09-08_180556742280×114 22.6 KB

Other than that there isnt much special, it just uses a TextLabel for text, UICorner for the rounded corners and some frames to make the button!

If you need to analyze it I can send the place file, but other than that, I hope this helps!

3 Likes
6

Thank you!! Could you send me the rbxm file so I can use it?

7

I would recommend trying to recreate it on your own, that way you can learn how it works, but I hope this can help point you in the right direction!
TextHolder.rbxl (63.9 KB)