How to apply a rounded corner to only one corner of a UI?

Hi there. I made an image label for my UI, and as it is positioned in the bottom left corner, I don’t want to round the top left, bottom left, or bottom right corners, but I do want to round the top right corner. Do you know if it is possible, and how I could do it without using image manipulation and using the same image but edited to have a rounded corner? Thanks for your time.

1 Like

Right now, there isn’t a direct way. But, there is a simple workaround.

To hide all three corners, you can use 2 rectangular Frames to do so. Position them so that they do not cover the desired corner that you want to be rounded. Here’s a little diagram:

The purple and green elements are the Frames and the semi-transparent element is the rounded UI. Notice how neither of the Frames touched the top-right corner.

The advantage of this is you can use this anywhere on the screen, but there needs to be 2 Frames every time you want to create this effect.

Another simple thing you can do is simply position the rounded UI so that the three corners you want to hide are offscreen.

The purple is the screen and the white is off-screen. Notice the UI’s rounded corners are going into the white.

Although you don’t need any additional objects, you will be restricted in terms of where you can place this (in the corners only for three hidden rounded corners, and the edges for two hidden).

Hope that helps!

11 Likes

Yes thank you! This is what I was planning to do, but thanks anyways for the information!

4 Likes