Make UI image element rounded corners using 9-sliced image

I am trying to create UI image element that would have rounded corners. I have reviewed this thread Round Corners in Image - #3 by gtg-nitesh
but there is just said you should use 9-sliced image not how to use it. Any suggestions?
Project link: PlayCanvas 3D HTML5 Game Engine

Hi @Lukas_Zahumensky,

Check this manual page on how to get started with 9-sliced sprites:

Hi @Leonidas Yes i have checked on that and created 9-sliced image but don’t know how to achieve these rounded corners then.

So, yes a step by step guide is missing, some steps that may help you in brief:

  1. You need a graphic with rounded edges.
  2. Create a sprite from your graphic using the Sprite Editor:

  1. Use the green/blue handlers in the Sprite editor to arrange the areas that should be 9-sliced.

  1. At the end use the New Sliced Sprite from Selection button to create your 9-sliced sprite. You can use it in your element/sprite components.


1 Like