# UI question

**URL:** <https://forums.unrealengine.com/t/ui-question/498637>\
**Category:** UI\
**Tags:** unreal-engine, UI, UE4, UMG\
**Created:** [February 16, 2022, 8:26am UTC](https://forums.unrealengine.com/t/ui-question/498637 "2022-02-16T08:26:55Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\
**Post date:** [February 16, 2022, 8:40am UTC](https://forums.unrealengine.com/t/ui-question/498637/2 "2022-02-16T08:40:25Z")

</div>

You will find this feature referred to as 9-slice here and there.

- here is what happens when we try to make a border with the `Image` setting:

Note how the edges and corners get distorted - they get squished!

- when `Box` is used, you get to reserve a percentage of the image (from each side) that will not be affected by stretching / squishing:

The edges are preserved. That .25 margin = 25% of the image in pixels. This image is 540px wide, meaning that 135px (from the left & right edges) will not be be affected by the image resizing. If the image becomes too small (2 x 135px in this case), you will observe distortion again.

* * *

> why there are 3x3 boxes in the box

The dotted lines indicate the margins mentioned above. If you add a margin from each side, you’ll end up with a grid like in the image. Those margins divide the image into 3x3 regions: hence 9-slice.

---

_[View the full topic](https://forums.unrealengine.com/t/ui-question/498637)._