How to create rounded UI elements

Archive
1
:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Szaronko

Hello. How can I create a box with rounded corners? I looked on the internet and appearently it can be done with something called StyleBoxFlat, but there is no tutorials on how to use it. I could ofcourse just do that with some texture as background but it seems like a terrible idea because then I would have to load texture for every UI element and it would be slow, so there must be simplier way.

Here is what I want to do

2
:bust_in_silhouette: Reply From: jgodfrey

You probably want to use aNinePatchRect for this. See the docs here, or find any number of tutorials online, including:

3
:bust_in_silhouette: Reply From: baneon

Create a StyleBoxFlat resource and in its properties customize Corner Radius, then in your theme add panel and load StyleBox to the panel.

It’s hard to explain with just images so I created a github repository with a simple example.

GitHub

To download only the folders you can use DownGit

This is the link already created:

UI with rounded edges

You decide. Good luck!

OKAY! I figured it out! Thanks a lot. You really helped me. Can’t believe noone made a tutorial like that and documentation really sucks. And it is really hard to understand without an example

Szaronko | 2022-04-14 21:47