Skip to content

Border

The Border element adds a solid border around its content with configurable thickness and color. It's commonly used to visually separate or highlight content sections.

It is virtual and doesn't affect layout calculations or content positioning. Half of the border thickness extends inward from the content edge, and half extends outward.

API

Thickness

MethodDescription
BorderSets a uniform border (all edges) for its content.
BorderVerticalSets a vertical border (left and right) for its content.
BorderHorizontalSets a horizontal border (top and bottom) for its content.
BorderLeftSets a border on the left side of its content.
BorderRightSets a border on the right side of its content.
BorderTopSets a border on the top side of its content.
BorderBottomSets a border on the bottom side of its content.

Each method requires a thickness value as a parameter. Optionally, you can specify the unit value (default is Unit.Points).

c#
container.Border(1);
container.Border(1, Unit.Millimeters);

TIP

Learn more about supported units in the Lenght unit types section.

Color

MethodDescription
BorderColorAdjusts color of the border element.

TIP

Learn more about supported color formats and predefined color palettes in the Colors section.

Example

Simple border

c#
container
    .Width(150)
    .Padding(25)  
    .BorderLeft(4)
    .BorderTop(6)
    .BorderRight(8) 
    .BorderBottom(10)
    .BorderColor(Colors.LightBlue.Darken3)
    .Background(Colors.Grey.Lighten3)
    .Padding(25) 
    .Text("Text");

example

Multiple borders

Use the Container method to apply multiple borders to the same content.

c#
container
    .Width(150)
    .Padding(25)

    .BorderTop(5)
    .BorderColor(Colors.LightBlue.Darken3)

    .Container()

    .BorderBottom(10)
    .BorderColor(Colors.LightBlue.Darken1)
    
    .Background(Colors.Grey.Lighten3)
    .Padding(25)
    .Text("Text")
    .FontSize(20);

example

Released under the MIT License