Tailwind CSS Borders Skill

Complete reference for border-related utilities in Tailwind CSS v4.1.

Contents

• Border Width - border , border-x , border-y , border-t , border-r , border-b , border-l

• Border Color - border-{color} , per-side border colors

• Border Style - border-solid , border-dashed , border-dotted , border-double

• Border Radius - rounded , rounded-t , rounded-r , rounded-b , rounded-l , rounded-tl , rounded-tr , rounded-bl , rounded-br , rounded-full

• Outline - outline , outline-{width} , outline-{color} , outline-offset

• Ring - ring , ring-{width} , ring-{color} , ring-offset , ring-offset-{color}

• Divide - divide-x , divide-y , divide-{color} , divide-{style}

Key Features

• Comprehensive border control with width, color, and style options

• Per-side border customization for fine-grained control

• Ring shadows as accessible focus indicators

• Divide utilities for separating child elements

• Full color palette support via design tokens

• Responsive and state variants support

v4.1 Updates

• Default ring width changed from 3px to 1px (use ring-3 for v3 behavior)

• Enhanced outline customization with outline-offset

• Improved border radius with corner-specific classes

• Better type safety with CSS variables in arbitrary values