border-width
用于控制元素边框宽度的工具类。
快速参考
| 类 | 属性 |
|---|---|
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; |
border-y-(length:<custom-property>) | border-block-width: var(<custom-property>); |
border-y-[<value>] | border-block-width: <value>; |
border-s | border-inline-start-width: 1px; |
border-s-<number> | border-inline-start-width: <number>px; |
border-s-(length:<custom-property>) | border-inline-start-width: var(<custom-property>); |
border-s-[<value>] | border-inline-start-width: <value>; |
border-e | border-inline-end-width: 1px; |
border-e-<number> | border-inline-end-width: <number>px; |
border-e-(length:<custom-property>) | border-inline-end-width: var(<custom-property>); |
border-e-[<value>] | border-inline-end-width: <value>; |
border-bs | border-block-start-width: 1px; |
border-bs-<number> | border-block-start-width: <number>px; |
border-bs-(length:<custom-property>) | border-block-start-width: var(<custom-property>); |
border-bs-[<value>] | border-block-start-width: <value>; |
border-be | border-block-end-width: 1px; |
border-be-<number> | border-block-end-width: <number>px; |
border-be-(length:<custom-property>) | border-block-end-width: var(<custom-property>); |
border-be-[<value>] | border-block-end-width: <value>; |
border-t | border-top-width: 1px; |
border-t-<number> | border-top-width: <number>px; |
border-t-(length:<custom-property>) | border-top-width: var(<custom-property>); |
border-t-[<value>] | border-top-width: <value>; |
border-r | border-right-width: 1px; |
border-r-<number> | border-right-width: <number>px; |
border-r-(length:<custom-property>) | border-right-width: var(<custom-property>); |
border-r-[<value>] | border-right-width: <value>; |
border-b | border-bottom-width: 1px; |
border-b-<number> | border-bottom-width: <number>px; |
border-b-(length:<custom-property>) | border-bottom-width: var(<custom-property>); |
border-b-[<value>] | border-bottom-width: <value>; |
border-l | border-left-width: 1px; |
border-l-<number> | border-left-width: <number>px; |
border-l-(length:<custom-property>) | border-left-width: var(<custom-property>); |
border-l-[<value>] | border-left-width: <value>; |
divide-x | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: 1px; } |
divide-x-<number> | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: <number>px; } |
divide-x-(length:<custom-property>) | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: var(<custom-property>); } |
divide-x-[<value>] | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: <value>; } |
divide-y | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: 1px; } |
divide-y-<number> | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: <number>px; } |
divide-y-(length:<custom-property>) | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: var(<custom-property>); } |
divide-y-[<value>] | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: <value>; } |
divide-x-reverse | --tw-divide-x-reverse: 1; |
divide-y-reverse | --tw-divide-y-reverse: 1; |
示例
基础示例
使用 border 或 border-2、border-4 等 border-<number> 工具类，设置元素四边的边框宽度：
border
border-2
border-4
border-8
html
<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-r 和 border-t-4 等工具类，设置元素某一边的边框宽度：
border-t-4
border-r-4
border-b-4
border-l-4
html
<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-x 和 border-y-4 等工具类，同时设置元素相对两边的边框宽度：
border-x-4
border-y-4
html
<div class="border-x-4 border-indigo-500 ..."></div>
<div class="border-y-4 border-indigo-500 ..."></div>使用逻辑属性
使用 border-s 和 border-e-4 等工具类设置 border-inline-start-width 和 border-inline-end-width 逻辑属性，它们会根据文本方向映射到左边框或右边框：
Left-to-right
Right-to-left
html
<div dir="ltr">
<div class="border-s-4 ..."></div>
</div>
<div dir="rtl">
<div class="border-s-4 ..."></div>
</div>使用 border-bs-<number> 和 border-be-<number> 工具类设置 border-block-start-width 和 border-block-end-width 逻辑属性，它们会根据书写模式映射到上边框或下边框：
html
<div class="border-bs-4 ..."></div>子元素之间
使用 divide-x 和 divide-y-4 等工具类，在子元素之间添加边框：
01
02
03
html
<div class="grid grid-cols-3 divide-x-4">
<div>01</div>
<div>02</div>
<div>03</div>
</div>反转子元素顺序
如果元素顺序是反转的（例如使用了 flex-row-reverse 或 flex-col-reverse），请使用 divide-x-reverse 或 divide-y-reverse 工具类，确保边框添加在每个元素的正确一侧：
01
02
03
html
<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>] 等工具类，根据完全自定义的值设置边框宽度：
html
<div class="border-[2vw] ...">
<!-- ... -->
</div>对于 CSS 变量，也可以使用 border-(length:<custom-property>) 语法：
html
<div class="border-(length:--my-border-width) ...">
<!-- ... -->
</div>这只是 border-[length:var(<custom-property>)] 的简写，会自动为你加上 var() 函数。
响应式设计
在 border-width 工具类前加上 md: 等断点变体，即可只在中等屏幕尺寸及以上应用该工具类：
html
<div class="border-2 md:border-t-4 ...">
<!-- ... -->
</div>在变体文档中了解更多关于使用变体的信息。