BorderColor3

Value Type: Color3

Description:

The UIStroke|UIStroke component allows for more advanced border effects.

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

Rainbow Frame

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

			
				Rainbow Frame

				Expected Output
			
				Expand
				
			-- 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
		
				Copy Code
			
				Light Theme

Button Highlight

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

			
				Button Highlight

				Expected Output
			
				Expand
				
			-- 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()
		
				Copy Code
			
				Light Theme