Tailwindcss Borders

Flags the v4.1 default ring width change (3px → 1px, use ring-3 for v3 behavior) and per-corner border-radius improvements.

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

Detailed References

• border.md - Load when styling border width/color/style, border-radius, or per-side border patterns
• outline.md - Load when configuring outline width/color/offset for focus and accessibility states
• ring.md - Load when building box-shadow-based rings or divide-* separators between children