How to created highlightable button of a rounded UI panel

I’m trying to create a set of toggle buttons. My panel has rounded edges using a sliced sprite. This is how it looks…

alt text

But if I highlight that top button, I get bleeding out of the rounded corners…

alt text

I can solve this if I use an image for the button which has rounded corners…

alt text

But this creates a new issue. Because I’m using a Vertical Layout Group to keep the buttons aligned and sized, after I add this image for the top button, it makes it larger than all the other buttons. (You can see this in comparison to the size of the 3rd button).

How can I resolve this so that I don’t get bleeding outside the border but they each stay equal in size?

I think you want to look at UI Masks,