border-width

示例

基础示例

使用 border 或 border-<数字> 工具类（如 border-2 和 border-4）来设置元素所有边的边框宽度：

<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 等工具类来设置元素单边的边框宽度：

<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 这样的工具类可以同时设置元素两侧的边框宽度：

<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 逻辑属性，这些属性会根据文本方向映射到左边框或右边框：

<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 等工具类在子元素之间添加边框：

<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 工具类来确保边框被添加到每个元素的正确侧：

<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>

使用自定义值

Use the border-[<value>] syntax to set the 边框宽度 based on a completely custom value:

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

For CSS variables, you can also use the border-(length:<custom-property>) syntax:

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

This is just a shorthand for border-[length:var(<custom-property>)] that adds the var() function for you automatically.

响应式设计

Prefix a border-width utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.