NUI / Components / Common

Border

ImplementedCommon / Display

Border draws a background, border, and corner radius around child content.

Supported as a visual frame container.

Overview

Border draws a background, border, and corner radius around child content.

When to use

Framed content.
Panels with visible edges.
Item backgrounds.
Visual grouping.

Children

Supports normal children.

nui

children {
    Text ChildText {
        text: "THIS IS THE CHILD COMPONENT"
    }
}

Basic syntax

nui

Border CardBorder {
    backgroundColor: "#111827"

    children {
        Text ChildText {
            text: "THIS IS THE CHILD COMPONENT"
        }
    }
}

Supported properties

Property	Type	Required	Default	Description
`backgroundColor`	color	No	Transparent	Fill color behind children.
`borderColor`	color	No	Transparent	Border color.
`borderThickness`	number	No	0	Border thickness.
`radius`	number	No	0	Corner radius.
`padding`	margin	No	margin(0)	Inner padding around children.
`childPadding`	margin	No	margin(0)	Additional child padding.
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`minWidth`	number	No	Unset	Minimum width.
`minHeight`	number	No	Unset	Minimum height.
`maxWidth`	number	No	Unset	Maximum width.
`maxHeight`	number	No	Unset	Maximum height.
`horizontalAlign`	enum	No	Inherited	Component horizontal alignment.
`verticalAlign`	enum	No	Inherited	Component vertical alignment.
`contentHorizontalAlign`	enum	No	Inherited	Child horizontal alignment.
`contentVerticalAlign`	enum	No	Inherited	Child vertical alignment.
`opacity`	number	No	1	Render opacity.
`layer`	integer	No	Context default	Layer order inside layered parents.
`visible`	bool	No	true	Visibility flag.

Contextual properties

Contextual property rules

Border may receive stack, canvas, grid, wrap, or ExpandableArea slot properties only when it is authored as a direct child of the matching parent. See section 7.

Full syntax example

nui

Border CardBorder {
    backgroundColor: "#111827"
    borderColor: "#334155"
    borderThickness: 1
    radius: 6
    padding: margin(12)
    childPadding: margin(4)
    width: 280
    height: 120
    minWidth: 180
    minHeight: 80
    maxWidth: 420
    maxHeight: 240
    horizontalAlign: fill
    verticalAlign: top
    contentHorizontalAlign: left
    contentVerticalAlign: center
    opacity: 1
    layer: 1
    visible: true

    children {
        Text ChildText {
            text: "THIS IS THE CHILD COMPONENT"
        }
    }
}

Limitations

Use Border for visual frames. Use Box or SizeBox when the main purpose is layout sizing.