Back to Details

tailwindcss-borders

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Tailwind CSS Borders Skill

Tailwind CSS 边框工具类 Skill

Complete reference for border-related utilities in Tailwind CSS v4.1.
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}
  • 边框宽度 - 
    border
    、
    border-x
    、
    border-y
    、
    border-t
    、
    border-r
    、
    border-b
    、
    border-l
  • 边框颜色 - 
    border-{color}
    、各边边框颜色设置
  • 边框样式 - 
    border-solid
    、
    border-dashed
    、
    border-dotted
    、
    border-double
  • 边框圆角 - 
    rounded
    、
    rounded-t
    、
    rounded-r
    、
    rounded-b
    、
    rounded-l
    、
    rounded-tl
    、
    rounded-tr
    、
    rounded-bl
    、
    rounded-br
    、
    rounded-full
  • 轮廓 - 
    outline
    、
    outline-{width}
    、
    outline-{color}
    、
    outline-offset
  • 环形阴影 - 
    ring
    、
    ring-{width}
    、
    ring-{color}
    、
    ring-offset
    、
    ring-offset-{color}
  • 分隔线 - 
    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

v4.1 更新内容

  • 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
  • 默认
    ring
    宽度从
    3px
    改为
    1px
    （使用
    ring-3
    可获得v3版本的效果）
  • 新增
    outline-offset
    增强轮廓自定义能力
  • 优化边框圆角，新增边角特定类
  • 任意值中使用CSS变量，提升类型安全性