---
name: tailwindcss-borders
description: "Border utilities Tailwind CSS v4.1. Border (border-width, border-color, border-style, border-radius, rounded-*), Outline (outline-*, outline-offset), Ring (ring-*, ring-offset), Divide (divide-*)."
user-invocable: false
---

# 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