With Sliced sprite images (i.e. sprites that are sliced into 9 sections in Sprite Editor), how to make it so that it has a thin border?

Followed Unity’s tutorial on UI Image: UI Image - Unity Official Tutorials - YouTube I tried to create a Sliced UI Image, that preserves the border while stretching the center part of the sprite.

However, my version of the button somehow turned out having very thick border, has empty space around it and is not in the proportion that I sliced it.

In the following screenshots, the top Button (my version) has an Image that has a huge border, while the button below (default UI Button) has a thin border.

Does anyone know what I’m doing wrong that’s causing this odd result in my Button?

Your sizes are just too small for the face to appear. The easiest way for you to fix it is probably just changing the PPU (Pixels Per Unit) count of your sprite from 100 to something like 500 and your face should “appear” then.

Remember that firstly your sliced corners get drawn if the size is just too small nothing else will appear.

Alternatively you can lower Reference PPU of your UI canvas, but that will effect not only that particular image.