How to create a background color on a widget?

i got stuck a bit and no idea how to do it.

I want to create a border box with a background color to separate “Mouse Settings” and “Gamepad Settings”.
I want a border around it for example “Black border” with a “gray background”.

No idea how to do it.

You answered you own question, actually :slight_smile: - Wrap it with a border.

Not sure if its the right way to do so but I can tell you how I do it.

Wrap the panel you want to have a background in an Overlay and use a blank texture to fill the area with and then you can use the controls to set the color.
If you want to have borders (that are not textures) you can also wrap for example the “Mouse Sensitivity” box in an overlay and give it a background, then use the padding to visually separate them.

Ive never figured out how the border widget is supposed to work, like literally nothing I did ever gave me a border.

As everynone mentioned you do use the border. You just child your Desired section to a border and make sure to set the border to ‘size to content’. You can then use the settings to add color or a selected background image. As for the border affect you can either use padding settings, or spacers within your box setup to get your desired effect.

So is the border widget basically just a background color on top of a background with a different color? Meaning I would have to assign the actual bg of my box in the border widget while the box itself still needs its own background, where the latter would become the border by using padding on the border widget.

Because if that is the case, I might as well just keep my overlays.

Overlays have a specific purpose; first of all, they can have multiple children while a border can only house 1. But most importantly, an overlay allows you to overlap widgets, position them in an arbitrary way, stack them one on top of another.

Border’s job is precisely what @ipninichuck described, no funny business. If an overlay gets the job done, that’s fine, too. Overlays may be a bit more performance hungry, this is probably negligible until you iterate through hundreds of them every frame, though.

@DamianToczek - if you want a proper border with an adaptive frame, look into 9slice - it’s described in the Styling Guide - Setting Image States section, explaining the use of DrawAs. Also, this ancient thread describes it in detail: [UMG] 9-slice images look ugly, can't get margins right - Blueprint Visual Scripting - Unreal Engine Forums

Thank you so much, a user send me a youtube tutorial i will check it out later :slight_smile: