Lzh on GitHub

border-width

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

快速参考

Class（类别）Styles（样式）
borderborder-width: 1px;
border-<number>border-width: <number>px;
border-(length:<custom-property>)border-width: var(<custom-property>);
border-<value>border-width: <value>;
border-xborder-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-yborder-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-sborder-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-eborder-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-tborder-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-rborder-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-bborder-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-lborder-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-<number> 工具，如 border-2 和 border-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-r 和 border-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-x 和 border-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-s 和 border-e-4 等工具设置 border-inline-start-width 和 border-inline-end-width 逻辑属性，这些属性根据文本方向映射到左边或右边框：

Left-to-right

Right-to-left

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

子元素之间

使用 divide-x 和 divide-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-reverse 或 flex-col-reverse），请使用 divide-x-reverse 或 divide-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-[length:var(<custom-property>)] 的一个简写形式，它会自动为你添加 var() 函数。

响应式设计

在边框宽度工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：

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

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