1. 边框
  2. 边框宽度

边框

边框宽度

用于控制元素边框宽度的实用工具。

类名样式
border
border-width: 1px;
border-<number>
border-width: <number>px;
border-(length:<custom-property>)
border-width: var(<custom-property>);
border-[<value>]
border-width: <value>;
border-x
border-inline-width: 1px;
border-x-<number>
border-inline-width: <number>px;
border-x-(length:<custom-property>)
border-inline-width: var(<custom-property>);
border-x-[<value>]
border-inline-width: <value>;
border-y
border-block-width: 1px;
border-y-<number>
border-block-width: <number>px;

示例

基础示例

使用 borderborder-<number> 实用工具 (如 border-2border-4) 来设置元素所有边的边框宽度

border

border-2

border-4

border-8

<div class="border border-indigo-600 ..."></div>
<div class="border-2 border-indigo-600 ..."></div>
<div class="border-4 border-indigo-600 ..."></div>
<div class="border-8 border-indigo-600 ..."></div>

单独边

使用 border-rborder-t-4 等实用工具来设置元素一侧的边框宽度

border-t-4

border-r-4

border-b-4

border-l-4

<div class="border-t-4 border-indigo-500 ..."></div>
<div class="border-r-4 border-indigo-500 ..."></div>
<div class="border-b-4 border-indigo-500 ..."></div>
<div class="border-l-4 border-indigo-500 ..."></div>

水平边和垂直边

使用 border-xborder-y-4 等实用工具来同时设置元素两侧的边框宽度

border-x-4

border-y-4

<div class="border-x-4 border-indigo-500 ..."></div>
<div class="border-y-4 border-indigo-500 ..."></div>

使用逻辑属性

使用 border-sborder-e-4 等实用工具来设置 border-inline-start-widthborder-inline-end-width 逻辑属性,这些属性根据文本方向映射到左边框或右边框

从左到右

从右到左

<div dir="ltr">
<div class="border-s-4 ..."></div>
</div>
<div dir="rtl">
<div class="border-s-4 ..."></div>
</div>

子元素之间

使用 divide-xdivide-y-4 等实用工具在子元素之间添加边框

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

反转子元素顺序

如果你的元素是反向顺序 (例如使用 flex-row-reverseflex-col-reverse),请使用 divide-x-reversedivide-y-reverse 实用工具来确保边框添加到每个元素的正确侧

01
02
03
<div class="flex flex-col-reverse divide-y-4 divide-y-reverse divide-gray-200">
<div>01</div>
<div>02</div>
<div>03</div>
</div>

使用自定义值

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

<div class="border-[2vw] ...">
<!-- ... -->
</div>

对于 CSS 变量,你还可以使用 border-(length:<custom-property>) 语法

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

这只是一个简写形式 border-[lengthvar(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计

前缀一个 border-width 实用工具 使用断点变体 (如 md:) 以仅在以下情况下应用实用工具中等 屏幕尺寸及以上

<div class="border-2 md:border-t-4 ...">
<!-- ... -->
</div>

变体文档 中了解有关使用变体的更多信息。

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