Clipping With Rounded Corners (for Static, Fully-Opaque Backgrounds)

[TheCarbyneUniverse (Carbyne)]

Disclaimer: This only works when you have a background (i.e. a frame) and when it is completely opaque (being semi transparent can reveal the descendants).

Hello everyone! This is my first community tutorial thread.

Currently, the ClipsDescendants property of UI objects only works with the rectangular boundaries of the element. Below, even though the green square is outside of the shape, it is still inside the boundary of the image button. That is why it is not being clipped as desired.

Luckily I found an easy fix to this!

Instead of having an image like this for the image button …

… we can use an image like this:

Basically, it’s the inverted version. The transparent areas are now opaque and the opaque areas are now transparent. You can simply create this in GIMP, Photoshop, etc. Make sure that there is an opaque border that goes all the way around the entire shape like in the picture above.

1. Now in Roblox Studio, upload the inverted image as an image button (I kept the normal one above for tutorial purposes):

(The red is the inverted image).

2. Add a text button inside this inverted Image Button. Format it however you want (make sure to set the size property to 1, 0, 1, 0 so that the text button is the same size as the image button. This is crucial.

3. Uh oh . The Text Button is covering the Image Button! To fix this, simply head to the image button’s ScreenGui and set the ZIndexBehavior to “Global.” (By default it is set to “Sibling” which makes it so that descendants always appear on top of the parent/ancestor. We do not want that). Then simply, go over to the Frame (the white background for me) and set the ZIndex property to 0 (so it is behind everything). Now set the ZIndex of the inverted Image Button and the Text Button to 2 and 1, respectively (Image Button’s ZIndex = 2, and Text Button’s = 1).

^ (ScreenGui ZIndexBehavior)

Now the Text Button is behind the inverted Image Button:

4. Set the ImageColor3 of the inverted Image Button to the color of the background (for me it would be white). Also, don’t forget to set the ClipsDescendants to true so nothing inside the Image Button appears outside of the rectangular bounds.

And… we’re done! They may look similar, but the bottom one can accurately clip its descendants:

(I added the green frame for demonstration purposes).

This is the end of the tutorial. Thank you for reading through this!
Before, I was really annoyed by Clip Descendant's limitations, however, since there is a fix now, my UI development has been significantly improved.

I really hope this helps you in your development experience as well.
Thank you.

[boatbomber (Zack_Ovits)]

This only works when you have a static background.
If you have no background, aka the background is the world, this trick won’t work since the world is colorful and constantly changing.

[ReelPlum (Plum)]

Would your module be able to do this with some changes?

[ReelPlum (Plum)]

We know that but BoatBomber has a module that can display images in different shapes with no background. Find it here

[boatbomber (Zack_Ovits)]

My module wouldn’t work well for this, because it uses Decals and not GUIs. You could have the decal button in the module form and an invisible text button above it to handle input. It’s not ideal, but plausible none the less.