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!


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.


This quite simply uses a technique called 9-slicing:
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


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


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.


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


  • 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)