Skip to main content
.border(config?: { style: Style; width?: number } | Style | number)
​
config
{ style: Style; width?: number } | Style | number
The border configuration. Can be:
  • An object with style (a Color or gradient) and optional width
  • A Style value directly (uses default width of 1)
  • A number specifying just the width (uses the foreground style)

​
Support

​
Usage

​
Simple color border

Text("Bordered")
    .padding(12)
    .border(Color("gray"))

​
Border with custom width

Text("Thick border")
    .padding(12)
    .border({ style: Color("blue"), width: 2 })

​
Gradient border

Text("Gradient border")
    .padding(12)
    .border({
        style: LinearGradient({
            colors: ["red", "blue"],
            startPoint: "leading",
            endPoint: "trailing"
        }),
        width: 2
    })

​
Combined with corner radius

Text("Rounded bordered")
    .padding(12)
    .cornerRadius(8)
    .border({ style: Color("blue"), width: 1 })

​
See Also