Clip SurfaceGui according to part shape

So I’m trying to make a phone in Roblox with parts, but I’ve run into quite a big problem

I’m using a SurfaceGui adorneed to a Union named ScreenAdornee, but I can’t seem to get the GuiObjects to clip according to the shape of the Union (shown below)

I’ve tried a lot of things including; parenting the GuiObjects to a Frame that has a UICorner and ClipDescendants on (didn’t work), changing the shape of the adornee using CSG to cut off the corners (didn’t work), etc.

This is my part hierarchy:
image

All help is appreciated! I really need this fixed because it’s a huge part of my game.

Put a ui corner on every frame that has a background, as ui corners don’t affect clip descendants

Sorry I don’t understand what you mean by that, can you explain it in a different way?

In every ui object that has background transparency below 1, add a ui corner

Oh I don’t mean it like that, I want the GuiObject to hide any excess pixels that exceed the boundary of the adornee, pretty much how ClipsDescendants behaves. I just don’t know how to do that with inorganic shapes

Then you would have to use a custom image as a background frame, otherwise it’s impossible