# Widget buttons changing shape... **URL:** \ **Category:** Programming & Scripting\ **Tags:** unreal-engine, Widget, question\ **Created:** [September 25, 2023, 3:08pm UTC](https://forums.unrealengine.com/t/widget-buttons-changing-shape/1311608 "2023-09-25T15:08:21Z")\ **Posts on this page:** 1\ **Showing post:** 4
**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:** [September 26, 2023, 6:25am UTC](https://forums.unrealengine.com/t/widget-buttons-changing-shape/1311608/4 "2023-09-26T06:25:10Z")
Is this the effect you’re after: > [@properly scale image as border in UMG](https://forums.unrealengine.com/t/properly-scale-image-as-border-in-umg/1268313/7): > > This looks fine. Are we talking about the border or the image that lives inside the border? [image] Here’s the behaviour I’d expect: From this image: [Untitled] > Premade widgets that use the same image file and it doesnt look stretched. It’s called [9-slice](https://en.wikipedia.org/wiki/9-slice_scaling) or [Box / Border](https://docs.unrealengine.com/4.27/en-US/InteractiveExperiences/UMG/UserGuide/Styling/) mode. * * * More details: > [@UI question](https://forums.unrealengine.com/t/ui-question/498637/2): > > 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 … How margins are calculated: > [@9-slice scaling UMG image](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231/4): > > The margins are percentage, as you said. For the image you posted, you’d have to keep margins at 0.4 or 0.35 - eyeballing it here, you may get away with 0.3 A margin 0.4 for an image 100x100 pixels would mean that when you stretch the image, only the 20 pixels in the middle will be stretched. The 40% from all sides will just stick to the edges. To get a good result, it’s always better to produce a base image that will never be scaled down, only up - basically make the smallest you will need an… --- _[View the full topic](https://forums.unrealengine.com/t/widget-buttons-changing-shape/1311608)._