# properly scale image as border in UMG **URL:** \ **Category:** UI\ **Tags:** unreal-engine, editor, Blueprint, question\ **Created:** [August 22, 2023, 12:16am UTC](https://forums.unrealengine.com/t/properly-scale-image-as-border-in-umg/1268313 "2023-08-22T00:16:45Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![rubm123](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rubm123/32/476292_2.png) [@rubm123](https://forums.unrealengine.com/u/rubm123)\ **Post date:** [August 22, 2023, 12:16am UTC](https://forums.unrealengine.com/t/properly-scale-image-as-border-in-umg/1268313/1 "2023-08-22T00:16:45Z")
![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/3/8/c/38c25c21aa6e8c7eabe0ef67139d7557d50a36a7.png) The png file has 640 x 640 pixels. I am following this tutorial: [youtube: Unreal Engine 4 SnackSize - How to Use the Border Widget](https://www.youtube.com/watch?v=Ho0G26VxmII) You can see how the png file is simply a green, rounded border in the preview. I can put any number into the Image Size fields … no effect. Why does the border appear so distorted? Why can’t I set a smaller image size? How to fix this? This is my widget hierarchy: ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/6/2/a/62a992048733f529369ac876ff3851b6f69b95ad.png) ---
**Author:** ![FrostyJas](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/frostyjas/32/1194640_2.png) [@FrostyJas](https://forums.unrealengine.com/u/FrostyJas)\ **Post date:** [August 22, 2023, 4:35am UTC](https://forums.unrealengine.com/t/properly-scale-image-as-border-in-umg/1268313/2 "2023-08-22T04:35:34Z")
Greetings @rubm123 The border boxes do stretch the textures inside of them. Have you adjusted the margin from 0.2 to 1.0? If not, try that and see what the image looks like afterward. I’ll do some testing on my end as well. Let me know what you find. ---
**Author:** ![rubm123](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rubm123/32/476292_2.png) [@rubm123](https://forums.unrealengine.com/u/rubm123)\ **Post date:** [August 22, 2023, 12:44pm UTC](https://forums.unrealengine.com/t/properly-scale-image-as-border-in-umg/1268313/3 "2023-08-22T12:44:50Z")
### Margin 1.0 ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/0/c/2/0c2af5ee0033991733599b4ec1a5ca9a07b96399.png) that’s for margin set to 1.0 (left, top, right, and bottom) ### Margin 0.8 ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/8/3/7/8376fe57ba335e235c689b1447b7da1430762d34.png) ### Margin 0.7 ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/a/4/f/a4f04658eeb55f0948a2571dc036ec6436973d98.png) * * * So the last one looks OK. But I don’t get it. Why does the image size have no effect? Given the original png (that I use for the border), 0.2 should be working fine. I have the same problem - that I can’t properly set the image size - elsewhere. Maybe there is something wrong in my widget hierarchy that addresses both cases. ---
**Author:** ![FrostyJas](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/frostyjas/32/1194640_2.png) [@FrostyJas](https://forums.unrealengine.com/u/FrostyJas)\ **Post date:** [August 23, 2023, 5:10am UTC](https://forums.unrealengine.com/t/properly-scale-image-as-border-in-umg/1268313/4 "2023-08-23T05:10:58Z")
I pulled a couple of posts that I think may help explain some of this a bit better. This is [post one](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231) and here is [post two](https://forums.unrealengine.com/t/umg-9-slice-images-look-ugly-cant-get-margins-right/15008). Give those two a read when you get a moment and see if that helps. ---
**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:** [August 23, 2023, 6:34am UTC](https://forums.unrealengine.com/t/properly-scale-image-as-border-in-umg/1268313/5 "2023-08-23T06:34:46Z")
> [@rubm123](#): > > Why does the image size have no effect? Because UMG is not clever enough and it uses the size of the asset itself. Image size would be important were you to use a material for 9-slicing: > [@How can i get nice unstreatched borders in UMG](https://forums.unrealengine.com/t/how-can-i-get-nice-unstreatched-borders-in-umg/1261331/3): > > 9-Slice. Scroll down to Setting Image States: Example: The material is drawn as a box with margins set to zero. However, no matter how I’m configuring the margin and the draw-as, I can’t get it to look good on smaller buttons: Can you show how it’s set up, and what are the sizes we’re talking about? The thing is that 9-slice only works up, you want to design the smallest possible UI elements first, and only then stretch them, preserving edges / corners intact. Material responds to I… > The png file has 640 x 640 pixels. .2 margin is 128px from each side. If your border is smaller than 256 in UMG, it will look distorted. As a general rule of thumb, go with the smallest image you can get away with and then scale it up. Is the smallest element going to be 640x640 in UMG? Also, margins above .49 make little sense for a border. Make the image 64x64 and then it will look ok for _all_ sizes from 64 upwards. ---
**Author:** ![rubm123](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rubm123/32/476292_2.png) [@rubm123](https://forums.unrealengine.com/u/rubm123)\ **Post date:** [August 23, 2023, 12:53pm UTC](https://forums.unrealengine.com/t/properly-scale-image-as-border-in-umg/1268313/6 "2023-08-23T12:53:06Z")
Thanks. Your hint to use a smaller image helped. ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/1/0/9/109fb61ea5d1280b6dcdd3324d270202a967917d.png) This is the same border.png, just scaled down to 64x64 pixels in Gimp. Margins are at 0.2. The left shows Draw As: Border. The right shows Draw As: Box. I would like to understand why Draw As: Box still looks stretched this way. Those are the settings. ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/3/e/e/3eeced59f606476312df4acb67b40f72504c9a11.png) ---
**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:** [August 23, 2023, 1:20pm UTC](https://forums.unrealengine.com/t/properly-scale-image-as-border-in-umg/1268313/7 "2023-08-23T13:20:51Z")
This looks fine. Are we talking about the border or the image that lives inside the border? ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/6/2/a/62a992048733f529369ac876ff3851b6f69b95ad.png) Here’s the behaviour I’d expect: From this image: ![Untitled](https://d3kjluh73b9h9o.cloudfront.net/original/4X/a/2/e/a2ef7feda4a7cbf29f40e2a1245b12d11e8ffc33.png)