Introduction
When UICorner was first released to the public almost a year ago, everyone was excited for it. The possibility of being able to have rounded instances for once. Truly an exciting time. However, one problem still stood. The corner boundaries did not respect ClipsDescendants, resulting in objects not staying within the area of the corners. I was also annoyed by this a bit too. So, I came up with a solution.
How is this done?
So let’s think of the design aspect of this. We need to make something that covers up the outside corner area with solid colors that matches the background. However, we can’t do this normal frames. It just doesn’t work! So, let’s find a different method. What if we used an image? That might work. We need 4 triangles in this one image, and the triangles have to have rounded areas that match the style of Roblox’s rounded area.
This might be a good example of how this might look if you’re using a CornerRadius of 0, 8.
So now we have our image. Save it, and now upload it to Roblox. Once it’s been accepted by moderation, we can then mess with it a bit. I recommend making this image the size of 1, 0, 1, 0 in UDim2. But there’s a problem. It’ll look really bad, and most importantly, stretched out.
We don’t want this type of effect, so we’ll change this up a bit. Let’s make the ScaleType into Slice. And then we can adjust that SliceCenter to be around 8, 8, 9, 9. Anddd, done!
Now, just change the ImageColor3 to be the color of the background your GuiObject is on. Also, change the ZIndex on the image to be very high. That way, no objects can move over the image itself. And you’re done! You can now make animated button effects (eg. particles) without having to worry about improper clipping
How do I make this myself?
This is easy to make, if you’re a designer of course. I only made 1 image for 0,8 CornerRadius since I feel like that was a good choice. However, you can make one yourself! Just play around and see what results you might get! I’m not too sure of how to make a Corner Overlay for other types of corner radiuses. I’m sure you could probably find out yourself. Maybe I’ll add onto this tutorial in case I find a method to make a corner overlay for other radius values.
Conclusion
This method is extremely useful, and also very powerful. Using this, you can make animated effects without having to worry about the effects being outside of corners. Whether that be particles inside of buttons, or maybe an animated image effect in frames. You can pretty much do anything with this. Go wild, and show off what you’ve made with this method.
For anyone who cannot make this themselves or they do not know how to make this, Roblox actually has Corner Overlay images in the files. To use them, simply get the image itself. However, these only work best on UICorner instances with 0, 8 CornerRadius. The image is rbxasset://textures/ui/ErrorPrompt/ShimmerOverlay.png
I hope you found this tutorial helpful!