1. 边框
  2. border-width

边框

border-width

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

样式
border
border-width: 1px;
border-<数字>
border-width: <数字>px;
border-(length:<自定义属性>)
border-width: var(<自定义属性>);
border-[<值>]
border-width: <值>;
border-x
border-inline-width: 1px;
border-x-<数字>
border-inline-width: <数字>px;
border-x-(length:<自定义属性>)
border-inline-width: var(<自定义属性>);
border-x-[<值>]
border-inline-width: <值>;
border-y
border-block-width: 1px;
border-y-<数字>
border-block-width: <数字>px;

示例

基本示例

使用 borderborder-<数字> 实用工具(如 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-[<值>] 语法 来设置边框宽度基于完全自定义的值

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

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

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

这只是 border-[lengthvar(<自定义属性>)] 的简写,它会自动为您添加 var() 函数。

响应式设计

一个 border-width 工具类 添加一个断点变体,例如 md:,以仅在中等中等 屏幕尺寸及以上应用该工具类。

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

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

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