Border Width

Control the thickness of widget borders. The width value maps directly to pixels.

Basic Usage
Quick Reference
Side-Specific Borders
Arbitrary Values
Responsive Design
Related Documentation

WContainer(
  className: 'border-4 border-blue-500 p-4',
  child: WText('Thick Border', className: 'text-blue-500'),
)

Basic Usage

Use the border- prefix followed by a number to set the border width in pixels. Border widths are direct pixel values — no REM or Pixel Factor scaling is applied:

WContainer(
  className: 'border-2 border-gray-300 p-4 rounded-md',
  child: WText('Thin border'),
)

WContainer(
  className: 'border-4 border-blue-500 p-4 rounded-lg',
  child: WText('Thick border'),
)

Quick Reference

Syntax

border-[width]

Class	Width	Description
`border`	1px	Default border (no number)
`border-1`	1px	1 pixel
`border-2`	2px	2 pixels
`border-4`	4px	4 pixels
`border-8`	8px	8 pixels

Any integer value works: border-3, border-6, etc.

Side-Specific Borders

Apply a border to individual sides using position suffixes:

Class	Side
`border-t-[width]`	Top
`border-b-[width]`	Bottom
`border-l-[width]`	Left
`border-r-[width]`	Right
`border-x-[width]`	Left and right
`border-y-[width]`	Top and bottom

WContainer(
  className: 'border-b-2 border-gray-200 p-4',
  child: WText('Bottom border only'),
)

Arbitrary Values

Use bracket notation for non-standard widths. The value is used directly as pixels:

border-[]

WContainer(
  className: 'border-[6] border-red-400 p-4',
  child: WText('6px border'),
)

Responsive Design

Adjust border width at different breakpoints:

WContainer(
  className: 'border-1 md:border-2 lg:border-4 border-blue-500 p-4',
  child: WText('Responsive border width'),
)

Border Color — apply color to borders.
Border Radius — round the corners of widgets.
Padding — inner spacing around widget content.