PcoWSkbVqDnWTu_dm2ix
We use cookies on this site to enhance your user experience
Collapse Sidebar

BorderColor3

GuiObject

Color3

BorderColor3 determines the color of a GuiObject|UI element’s rectangular border (also known as the stroke color).

This is separate from the UI element’s GuiObject/BackgroundColor3. If you set a UI element’s border and background colors to the same color, you will be unable to distinguish the two.

Other properties properties that determine the visual properties of the border include GuiObject/BorderSizePixel and GuiObject/BackgroundTransparency.

Note that you will not be able to see an element’s border if its BorderSizePixel property is set to 0.


Code Samples


Button Highlight

This code sample causes the border of a parent GuiObject to highlight when the user hovers their mouse over the element.

-- Put me inside some GuiObject, preferrably an ImageButton/TextButton
local button = script.Parent

local function onEnter()
	button.BorderSizePixel = 2
	button.BorderColor3 = Color3.new(1, 1, 0) -- Yellow
end

local function onLeave()
	button.BorderSizePixel = 1
	button.BorderColor3 = Color3.new(0, 0, 0) -- Black
end

-- Connect events
button.MouseEnter:connect(onEnter)
button.MouseLeave:connect(onLeave)
-- Our default state is "not hovered"
onLeave()

Rainbow Frame

This code sample causes a parent Frame to loop through all colors of the rainbow using Color3.fromHSV.

-- Put this code in a LocalScript in a Frame
local frame = script.Parent

while true do
	for hue = 0, 255, 4 do
		-- HSV = hue, saturation, value
		-- If we loop from 0 to 1 repeatedly, we get a rainbow!
		frame.BorderColor3 = Color3.fromHSV(hue/256, 1, 1)
		frame.BackgroundColor3 = Color3.fromHSV(hue/256, .5, .8)
		wait()
	end
end