# Texture Settings for UI Widget Backgrounds/Borders **URL:** \ **Category:** Getting Started & Setup\ **Tags:** unreal-engine, question\ **Created:** [November 9, 2023, 11:02am UTC](https://forums.unrealengine.com/t/texture-settings-for-ui-widget-backgrounds-borders/1375605 "2023-11-09T11:02:02Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Eugenio81\_IT](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/eugenio81_it/32/767579_2.png) [@Eugenio81\_IT](https://forums.unrealengine.com/u/Eugenio81_IT)\ **Post date:** [November 9, 2023, 11:02am UTC](https://forums.unrealengine.com/t/texture-settings-for-ui-widget-backgrounds-borders/1375605/1 "2023-11-09T11:02:02Z")
Hello everyone !! 🙂 I am learning Unreal 5.3.x after having used Unity since 2008. I am trying to create some UI Widgets and I would like to know if in Unreal is possible to achieve something I was doing in Unity using their UGUI System. Basically I would like to be able to set a background texture as sliced by specifying some borders. Doing this way I will be able to stretch the texture and use it as a background for a panel keeping the proportion of the 4 angles. _ **PLEASE NOTE:** _ _**because I am new in the forum, I cannot post a question with more than 1 embedded media, therefore, I strongly suggest you to take a look at [this shared document](https://docs.google.com/document/d/1jph11Wc5B-iNsQGxi2j8HkSYoHOdN5WVzRGUVvvfcr8/edit?usp=sharing) that better explains what I mean using a few more screenshots.**_ I will now try to explain what I mean in words and 1 single image. In Unity, I have a texture 64x64 imported as a Sprite. Using the Sprite Editor I can then set some borders. Having 2 different images with the same settings allows me to configure the texture borders as much as I like but, in essence, the texture used is the same. With a sliced sprite I can create a panel stretching it as much as I like in both X and Y without modifying the 4 angles look’n’feel. Basically, it’s the same as having the corners and the lines in separated textures and combining them to form some sort of border. In fact, if in Unity I will uncheck the FillCenter setting, I literally get ![Screenshot 2023-11-09 114242](https://d3kjluh73b9h9o.cloudfront.net/original/4X/9/a/c/9ac5ebf9a810f5152530e5dad09f931a35e81142.png) I tried to look on the Internet but the only tutorials I found are about having separated textures. Could you please help me figure out if this same behaviour is achievable in Unreal 5.3? Thank you very much !! 🙂 ---
**Author:** ![eldany.uy](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/eldany.uy/32/821920_2.png) [@eldany.uy](https://forums.unrealengine.com/u/eldany.uy)\ **Post date:** [November 9, 2023, 11:12am UTC](https://forums.unrealengine.com/t/texture-settings-for-ui-widget-backgrounds-borders/1375605/2 "2023-11-09T11:12:37Z")
This may be handy for you: [![](https://d3kjluh73b9h9o.cloudfront.net/original/4X/d/d/4/dd47841908ddad972ab7b99b9d4b0c8558434156.jpeg "How To Create UMG UI in Unreal Engine - Rounded Corners") ](https://www.youtube.com/watch?v=lCVbNlKb6qs) ---
**Author:** ![Eugenio81\_IT](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/eugenio81_it/32/767579_2.png) [@Eugenio81\_IT](https://forums.unrealengine.com/u/Eugenio81_IT)\ **Post date:** [November 9, 2023, 11:17am UTC](https://forums.unrealengine.com/t/texture-settings-for-ui-widget-backgrounds-borders/1375605/3 "2023-11-09T11:17:33Z")
Thanks, I will take a look !! 🙂 _ **EDIT** _ I took a look to the video and I think this doesn’t answer my question. Is it pretty cool to see that in Unreal you can create a box and manage its shape natively giving you the possibility to create a few interesting shape without the need of having custom textures, however, when I normally create UI, I work in conjunction with UX/UI artists who provide custom skin designs that I have then to implement. This implies the usage of custom textures. I tried to play around with the Border widget but I was not able to replicate the same result I can achieve in Unity. Maybe it was me not fully understanding the tool but I mostly think it was not what I am looking for. Anyway, thank you very much for the resource you linked because it was really useful nonetheless !!! 😉 ---
**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:** [November 9, 2023, 11:30am UTC](https://forums.unrealengine.com/t/texture-settings-for-ui-widget-backgrounds-borders/1375605/4 "2023-11-09T11:30:25Z")
Also: > **[Styling](https://docs.unrealengine.com/4.27/en-US/InteractiveExperiences/UMG/UserGuide/Styling/)** > > A guide to stylizing Widget Blueprints in UMG. Scroll down to `Setting Image States` a.k.a. [9-slicing](https://en.wikipedia.org/wiki/9-slice_scaling) ![BoxExample](https://d3kjluh73b9h9o.cloudfront.net/original/4X/9/1/1/9116b2555d1706217153578d275eff5870b429c6.jpeg) You’re after the above, right? ---
**Author:** ![Eugenio81\_IT](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/eugenio81_it/32/767579_2.png) [@Eugenio81\_IT](https://forums.unrealengine.com/u/Eugenio81_IT)\ **Post date:** [November 9, 2023, 2:19pm UTC](https://forums.unrealengine.com/t/texture-settings-for-ui-widget-backgrounds-borders/1375605/5 "2023-11-09T14:19:58Z")
This is exactly what I am looking for !!! 😃 The Unreal doc page you linked was for Unreal 4.6, as I mentioned I am on Unreal 5.3 and, I think, [this is the correct link](https://docs.unrealengine.com/5.3/en-US/umg-styling-in-unreal-engine/) for that version !! But, annoyingly, I cannot figure out how to apply the slicing to my texture. This is what I am actually trying to do: ![Screenshot 2023-11-09 151309](https://d3kjluh73b9h9o.cloudfront.net/original/4X/b/f/6/bf67ee5327153e848dfcba4adbca78535eb31e0d.png) I would like to use the Border (or could also be directly a simple Image but I don’t know if I can achieve the 9-slicing with it) as the background for my panel and then add more stuff inside it (such as some text and a few buttons). Although, as you can see, I am not able to “slice” style properly and the image looks really ugly. I need the image more tall than wide and at the moment it is just stretched. I would like to share more screenshots but I cannot still add more than 1 media in my posts: I tried a few combinations but nothing is letting me do what I am trying to achieve… ---
**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:** [November 9, 2023, 2:40pm UTC](https://forums.unrealengine.com/t/texture-settings-for-ui-widget-backgrounds-borders/1375605/6 "2023-11-09T14:40:12Z")
Well, you’re not using the feature yet: ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/0/8/7/0872c9865f0b83e803a5e862aa81f1d822994951.png) Once you’ve decided on the desired mode, use margins to dictate the behaviour. For this particular shape, you’ll need margins around 0.4. The actual math: > [@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… ---
**Author:** ![Eugenio81\_IT](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/eugenio81_it/32/767579_2.png) [@Eugenio81\_IT](https://forums.unrealengine.com/u/Eugenio81_IT)\ **Post date:** [November 9, 2023, 2:48pm UTC](https://forums.unrealengine.com/t/texture-settings-for-ui-widget-backgrounds-borders/1375605/7 "2023-11-09T14:48:16Z")
So, this is what I came up with: ![Screenshot 2023-11-09 154643](https://d3kjluh73b9h9o.cloudfront.net/original/4X/8/1/7/8179674cbd4b504603aecfa1cd535f15176ea15f.png) From 0.3 to 0.7 of the margins, the image looks exactly the same. Not exactly what I wanted that to look but I started understanding how this works, thank you !! 🙂 I think I need to get different resources from the ones I was using in Unity: probably with a different texture I can actually achieve what I am trying to. ---
**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:** [November 9, 2023, 2:48pm UTC](https://forums.unrealengine.com/t/texture-settings-for-ui-widget-backgrounds-borders/1375605/8 "2023-11-09T14:48:42Z")
Do not go over .49 - that’d flip things over. One critical bit is to start with the smallest image size you’ll ever need - slicing only works _upwards_. ---
**Author:** ![system](https://d3kjluh73b9h9o.cloudfront.net/original/4X/7/1/3/713c9d3f58553f0de89543d76a8a3a2779dc9fa4.png) [@system](https://forums.unrealengine.com/u/system)\ **Post date:** [December 9, 2023, 2:49pm UTC](https://forums.unrealengine.com/t/texture-settings-for-ui-widget-backgrounds-borders/1375605/9 "2023-12-09T14:49:38Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.