Border Width, Color, & Radius

Utilities for controlling border width, color, style, and border radius.

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

Basic Usage

// Basic border (1px solid gray-200 by default)
WDiv(className: 'border')

// Thicker border with color
WDiv(className: 'border-2 border-blue-500')

// Rounded corners
WDiv(className: 'border rounded-lg p-4')

// Specific side border
WDiv(className: 'border-b-2 border-red-500')

Quick Reference

Border Width

Border Style

Border Radius

Variants

Individual Sides

Control border width for specific sides using -t, -r, -b, and -l suffixes.

// Top border only
WDiv(className: 'border-t-4 border-indigo-500')

// Right and Left borders
WDiv(className: 'border-r border-l border-gray-300')

Corner Radius

Control radius for specific corners or sides.

// Top corners only
WDiv(className: 'rounded-t-lg bg-white')

// Top-left corner only
WDiv(className: 'rounded-tl-md bg-blue-100')

Color Opacity

You can control the opacity of border colors using the color opacity modifier.

// 50% opacity red border
WDiv(className: 'border-2 border-red-500/50')

Responsive Design

Prefix any border utility with a breakpoint variant to apply it at specific screen sizes.

// No border on mobile, 2px border on tablet+
WDiv(className: 'border-0 md:border-2')

// Square on mobile, rounded on desktop
WDiv(className: 'rounded-none lg:rounded-xl')

Dark Mode

Use the dark: prefix to style borders differently in dark mode.

WDiv(
  className: 'border border-gray-200 dark:border-gray-700'
)

Arbitrary Values

If you need a value that doesn't fit the theme, use square bracket notation.

// Specific pixel width
WDiv(className: 'border-[3px]')

// Specific hex color
WDiv(className: 'border-[#1da1f2]')

// Specific radius
WDiv(className: 'rounded-[10px]')

Customizing Theme

Customize standard values in WindThemeData.

WindThemeData(
  // Custom border widths
  borderWidths: {
    'DEFAULT': 1.0,
    '3': 3.0, // adds border-3
    'thin': 0.5, // adds border-thin
  },
  
  // Custom border radius
  borderRadius: {
    'DEFAULT': 4.0,
    'xl': 12.0,
    'mega': 32.0, // adds rounded-mega
  },
  
  // Custom colors
  colors: {
    'brand': Colors.indigo, // adds border-brand
  },
)

Related Documentation

• Ring Utilities - Focus rings and outlines