tailwindcss-borders

Tailwind CSS v4.3 中与边框相关工具类的完整参考：边框宽度／颜色／样式及各侧变体（包括 v4.2 起提供的逻辑属性 `border-bs`／`border-be`）、`rounded-*` 边框半径（包括各角变体）、带 `outline-offset` 的 `outline-*`、基于 box-shadow 的 `ring-*`（带 `ring-offset`），以及用于分隔子元素的 `divide-*`。

提示 v4.0 中默认 ring 宽度的变化（从 3px 改为 1px；若要使用 v3 的行为，请用 ring-3），以及各角边框半径的改进。

Tailwind CSS 边框技能

Tailwind CSS v4.3 中与边框相关工具类的完整参考。

目录

• 边框宽度 - border、border-x、border-y、border-t、border-r、border-b、border-l、逻辑属性 border-s、border-e、border-bs、border-be（v4.2 起支持 block-start／end）
• 边框颜色 - 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}

主要特性

• 全面的边框控制，提供宽度、颜色和样式选项
• 可自定义各侧边框，实现精细控制
• 将环形阴影用作无障碍焦点指示器
• 使用分隔工具类分隔子元素
• 通过设计令牌支持完整的颜色调色板
• 支持响应式变体和状态变体

v4 更新

• v4.0 中默认 ring 宽度从 3px 改为 1px（若要使用 v3 的行为，请用 ring-3）
• v4.2 新增逻辑块轴边框 border-bs-* / border-be-*（border-block-start / border-block-end）
• 增强了通过 outline-offset 自定义轮廓的能力
• 改进了边框半径，新增针对特定角的类
• 使用任意值中的 CSS 变量，提升了类型安全性

详细参考

• border.md - 设置边框宽度／颜色／样式、边框半径或各侧边框样式时加载
• outline.md - 为焦点和无障碍状态设置轮廓宽度／颜色／偏移时加载
• ring.md - 构建基于 box-shadow 的环形效果或用于分隔子元素的 divide-* 分隔线时加载