Tailwind CSS Borders Skill

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