Recoloring the "roblox round" GUI styles?

Hello, friends! This may not be a script (I’m not sure, actually!) but I have seen quite a few games have what appears to be the Text Label/Button in a roblox round style and have been able to recolor the background. Here, take a look for yourself!

I know I’m missing something big here. Any style other than custom does not allow me to change background color. How are they achieving this?

Thank you!

3 Likes

The designs are not offered by Roblox themselves, they are images that the developer has designed and uploaded to use in their game.

As @0xABCDEF has said below, these images can be split into 9 slices to create a scalable button.

2 Likes

This quite simply uses a technique called 9-slicing:
symbol_guides
As you can see, the center gets scaled, the sides only on a specific axis, and the corners don’t. This is great for creating a border without having to resize your image. If you utilize this in such a way, you can achieve a rounded corner effect that properly scales

Roundify is a really neat plugin that does this for you. So it’s good if you don’t really understand it.

Tip: When using images, be sure to make them white so ImageColor3 will work properly. This is so you can use the same image as a base, whilst colouring to your needs.

Edit: worded awkwardly

12 Likes

Thank you so much! This is exactly what i was looking for.

2 Likes

You need a rounded Image in order to do this that is entirely white, here’s a link to one I made (SliceCenter 24, 1, 32, 48):

From there you can change it to any color you want via the ImageColor3 property. Use the 9-slicing technique mentioned above to resize it nicely.
qXvljHSVAN

4 Likes

I also have a shadow base I made that works pretty effectively:

Properties:

  • Slice center: 39, 39, 48, 48
  • Size: {1, 30},{1, 30}
  • Position: {0, 0},{0, 6} (this can tweaked if you like)
  • Anchor point: {0.5, 0.5}
  • ^ Preferably parented to another frame, then setting the zindex 1 lower so it renders underneath
  • 0.75 transparency, dark grey (again can be tweaked)
4 Likes