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