border-color
快速参考
(省略)
示例
基本示例
使用 border-rose-500 和 border-lime-100 等工具类来控制元素的边框颜色：
border-indigo-500
border-purple-500
border-sky-500
<div class="border-4 border-indigo-500 ..."></div>
<div class="border-4 border-purple-500 ..."></div>
<div class="border-4 border-sky-500 ..."></div>
更改不透明度
使用颜色不透明度修饰符来控制元素边框颜色的不透明度：
border-indigo-500/100
border-indigo-500/75
border-indigo-500/50
<div class="border-4 border-indigo-500/100 ..."></div>
<div class="border-4 border-indigo-500/75 ..."></div>
<div class="border-4 border-indigo-500/50 ..."></div>
单侧边框
使用 border-t-indigo-500 和 border-r-lime-100 等工具类来设置元素单侧的边框颜色：
border-t-indigo-500
border-r-indigo-500
border-b-indigo-500
border-l-indigo-500
<div class="border-4 border-indigo-200 border-t-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-r-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-b-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-l-indigo-500 ..."></div>
水平和垂直两侧
使用 border-x-indigo-500 和 border-y-lime-100 等工具类同时设置元素水平和垂直两侧的边框颜色：
border-x-indigo-500
border-y-indigo-500
<div class="border-4 border-indigo-200 border-x-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-y-indigo-500 ..."></div>
使用逻辑属性
使用 border-s-indigo-500 和 border-e-lime-100 等工具类来设置 border-inline-start-color 和 border-inline-end-color 逻辑属性，这些属性根据文本方向映射到左边框或右边框：
Left-to-right
Right-to-left
<div dir="ltr">
<div class="border-s-indigo-500 ..."></div>
</div>
<div dir="rtl">
<div class="border-s-indigo-500 ..."></div>
</div>
子元素之间的分隔线
使用 divide-indigo-500 和 divide-lime-100 等工具类来控制子元素之间的边框颜色：
<div class="grid grid-cols-3 divide-x-4 divide-indigo-500">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
使用自定义值
使用 border-[<value>] 语法设置基于完全自定义值的边框颜色：
<div class="border-[#243c5a] ...">
<!-- ... -->
</div>
对于 CSS 变量，您还可以使用 border-(<custom-property>) 语法：
<div class="border-(--my-border) ...">
<!-- ... -->
</div>
这只是 border-[var(<custom-property>)] 的简写，它会自动为您添加 var() 函数。
应用焦点样式
为 border-color 工具类添加 focus:* 等变体前缀，以仅在该状态下应用该工具类：
<input class="border-2 border-gray-700 focus:border-pink-600 ..." />
在 变体文档 中了解更多关于使用变体的信息。
响应式设计
为 border-color 工具类添加 md: 等断点变体前缀，以仅在 中等 屏幕尺寸及以上应用该工具类：
<div class="border-blue-500 md:border-green-500 ...">
<!-- ... -->
</div>
在 变体文档 中了解更多关于使用变体的信息。
自定义主题
使用 --color-* 主题变量来自定义项目中的 颜色 工具类：
@theme {
--color-regal-blue: #243c5a;
}
现在，border-regal-blue 工具类可以在您的标记中使用：
<div class="border-regal-blue">
<!-- ... -->
</div>
在 主题文档 中了解更多关于自定义主题的信息。