Border Color
Apply colors to widget borders using predefined theme colors or arbitrary hex values.
On this page
borders/border_color
The live demo is not available for this example.
border_color.dart
View source
WContainer(
className: 'border-2 border-red-500 p-4',
child: WText('Red Border', className: 'text-blue-500'),
)
Basic Usage#
Combine border-[width] with border-[color]-[shade] to draw a colored border:
WContainer(
className: 'border-2 border-blue-500 p-4',
child: WText('Blue border', className: 'text-blue-500'),
)
WContainer(
className: 'border-1 border-gray-300 dark:border-gray-600 p-4 rounded-md',
child: WText('Subtle border', className: 'text-gray-700 dark:text-gray-200'),
)
Note: Wind applies border colors via Border.all inside BoxDecoration, resolved through applyBorderColor. Both the width class and the color class must be present for the border to render.
Quick Reference#
Syntax#
border-[color]-[shade]
border-[color]
color: the color name. Omitting the shade defaults to500.shade:50,100,200,300,400,500,600,700,800, or900.
Example Classes#
| Class | Color | Shade | Description |
|---|---|---|---|
border-red-500 |
Red | 500 | Red border |
border-blue-300 |
Blue | 300 | Light blue border |
border-gray-200 |
Gray | 200 | Subtle border |
border-green-700 |
Green | 700 | Dark green border |
For the full palette, see Customizing Colors.
Arbitrary Values#
Apply any color with a hex code:
border-[#rrggbb]
WContainer(
className: 'border-2 border-[#1abc9c] p-4',
child: WText('Custom Color Border', className: 'text-blue-500'),
)
Responsive Design#
Prefix the border color class with a breakpoint to apply it conditionally:
WContainer(
className: 'border-2 border-gray-300 md:border-blue-500 p-4',
child: WText('Responsive border color'),
)
Dark Mode#
Pair light border colors with dark: variants:
WContainer(
className: 'border-1 border-gray-200 dark:border-gray-700 p-4 rounded-md',
child: WText('Dark-mode border', className: 'text-gray-900 dark:text-white'),
)
Customizing Theme#
Border colors use the same color palette as backgrounds. Add custom colors with WindTheme.addColor:
WindTheme.addColor('brand', MaterialColor(0xFF6200EE, {
500: Color(0xFF6200EE),
}));
WContainer(className: 'border-2 border-brand-500 p-4', child: WText('Brand border'))
See Customizing Colors for details.
Related Documentation#
- Border Width — control the thickness of borders.
- Border Radius — round the corners of widgets.
- Background Color — apply background colors.
- Customizing Colors — add and override palette colors.