Border Width
Control the thickness of widget borders. The width value maps directly to pixels.
On this page
borders/border_width
The live demo is not available for this example.
border_width.dart
View source
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-[<value>]
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'),
)
Related Documentation#
- Border Color — apply color to borders.
- Border Radius — round the corners of widgets.
- Padding — inner spacing around widget content.