边框宽度

Class Styles

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

从左到右

从右到左

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

目录