BorderSizePixel

Value Type: int

Description:

This property determines how wide a GuiObject|GUI's border should render, in pixels.

This property, GuiObject/BorderColor3, and GuiObject/BackgroundTransparency determine how the border of a GUI element should look.

The border width extends outward the perimeter of the rectangle. For instance, a GUI with a width of 100 pixels and BorderSizePixel set to 2 will actually render 102 pixels wide.

Setting this to 0 will disable the border altogether.

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.

				
					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