Border Color

Apply colors to widget borders using predefined theme colors or arbitrary hex values.

• Basic Usage
• Quick Reference
• Arbitrary Values
• Responsive Design
• Dark Mode
• Customizing Theme
• Related Documentation

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 to 500.
• shade: 50, 100, 200, 300, 400, 500, 600, 700, 800, or 900.

Example Classes

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.