Changing GUI Frame Styles

Changing GUI Frame Styles

Mar 30 2021, 5:23 AM PST


You want to change the style of a Frame.


Use several style properties of the Frame.

local screen, frame = Instance.new('ScreenGui'), Instance.new('Frame')
screen.Parent = game.StarterGui
frame.Parent = screen
frame.Position = UDim2.new(.375, 0, .375, 0)
frame.Size = UDim2.new(.25, 0, .25, 0)
frame.BackgroundColor3 = Color3.new(1, 1, 1)
frame.BackgroundTransparency = .5
frame.BorderSizePixel = 0


A Frame is a rectangle (the above example creates a square, and indeed squares are rectangles). We center the Frame as we did with the TextLabel previously. We then use a new property called BackgroundColor3 which controls the frame’s color. A Color3 value is another type that is used to represent colors in RGB format. The Color.new function takes 3 arguments, the R, G, and B between 0 and 1 (as opposed to the traditional 0 to 255 range). Color3 values will be covered in depth in a future chapter, however just know for now that Color3.new(1, 1, 1) creates a value of white.

We then have the BackgroundTransparency property which works like the Transparency property in a part, except this applies to the background of the frame. The last property is the BorderSizePixel property. This should be either 1 or 0, 1 meaning the border has a frame, 0 meaning it doesn’t. In this case we don’t want a Border so we set it to 0.

  • gui