文档组件博客案例
  1. 边框
  2. border-color

边框

border-color

用于控制元素边框颜色的实用工具类。

类样式
border-inherit
border-color: inherit;
border-current
border-color: currentColor;
border-transparent
border-color: transparent;
border-black
border-color: var(--color-black); /* #000 */
border-white
border-color: var(--color-white); /* #fff */
border-red-50
border-color: var(--color-red-50); /* oklch(0.971 0.013 17.38) */
border-red-100
border-color: var(--color-red-100); /* oklch(0.936 0.032 17.717) */
border-red-200
border-color: var(--color-red-200); /* oklch(0.885 0.062 18.334) */
border-red-300
border-color: var(--color-red-300); /* oklch(0.808 0.114 19.571) */
border-red-400
border-color: var(--color-red-400); /* oklch(0.704 0.191 22.216) */

示例

基本示例

使用类似 border-rose-500 和 border-lime-100 的工具类来控制元素的边框颜色

border-indigo-500

border-purple-500

边框颜色: 天蓝色-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

左边框颜色-靛蓝色-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 的工具类来同时设置元素两侧的边框颜色

边框-x-靛蓝-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 逻辑属性，它们会根据文本方向映射到左边框或右边框

从左到右

从右到左

<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 的工具类来控制子元素之间的边框颜色

01
02
03
<div class="grid grid-cols-3 divide-x-4 divide-indigo-500">  <div>01</div>  <div>02</div>  <div>03</div></div>

使用自定义值

使用 border-[<值>] 语法 来设置边框颜色基于完全自定义的值

<div class="border-[#243c5a] ...">  <!-- ... --></div>

对于 CSS 变量，您还可以使用 border-(<自定义属性>) 语法

<div class="border-(--my-border) ...">  <!-- ... --></div>

这只是 border-[var(<自定义属性>)] 的简写，它会自动为您添加 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-* 主题变量来定制你项目中的color 工具类

@theme {  --color-regal-blue: #243c5a; }

现在 border-regal-blue 工具类可以在你的标记中使用

<div class="border-regal-blue">  <!-- ... --></div>

在 主题文档.

本页内容

Refactoring UI

来自 Tailwind CSS 的创建者

让你的想法看起来很棒，而无需依赖设计师。

“这是我开始构建应用程序时希望拥有的生存工具包。”

Derrick Reimer, SavvyCal

版权所有 © 2025 Tailwind Labs Inc.·商标政策