Rounded/curved material please!

Hey, so does anyone know how I can make a material that has rounded edges for my UI progress bar + buttons? And make it so I can choose the amount of roundness the material has

Any help is much appreciated, thank you! :slight_smile:

it’s not overly complicated to round a box, but WHY?
make an image. use the image. done.

1 Like

I was thinking of making it as it is really flexible so I could easily change how round the sides are whenever I want

This works well. And while you’re at it, do look into 9-slice:

5 Likes

Thanks for this!
Do you know anyway I can make it even more curved because when I increase the corner radius it just goes back to being straight after increasing it over a certain value?

Set the dimension to .5 and the corners to .5 → That’s a circle. Both values should generally add up to 1. Parametrise it and fiddle until you’re happy:

Or:

7 Likes

Ah my bad, thanks so much for the help! :))

Hey, sorry that’s two years later, but will it be possible to round only one edge? What’s the math behind something like this? I tried to go into the function but it’s just a scalar for the corner radius, and a vector three or four won’t work (it will take in consideration only R). Thanks!

The UV is U=horizontal, V=vertical.
A square is defined as 0 to 1 in each range.

U 0 to .5 v 0 to .5 would isolate the top left corner (or a corner anyway, which it is depends on what the engine chooses to use as starting point).

Pass the code above into something that takes UVs as parameters or filter it after defining a shape that has a VU value.

For anyone looking for alternatives, UE5 now supports this:

This is a single border.

Yeah, but opacity is broken for outline.