邊框
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; |
border-y-(length:<自訂屬性>) | border-block-width: var(<自訂屬性>); |
border-y-[<值>] | border-block-width: <值>; |
border-s | border-inline-start-width: 1px; |
border-s-<數字> | border-inline-start-width: <數字>px; |
border-s-(length:<自訂屬性>) | border-inline-start-width: var(<自訂屬性>); |
border-s-[<值>] | border-inline-start-width: <值>; |
border-e | border-inline-end-width: 1px; |
border-e-<數字> | border-inline-end-width: <數字>px; |
border-e-(length:<自訂屬性>) | border-inline-end-width: var(<自訂屬性>); |
border-e-[<值>] | border-inline-end-width: <值>; |
border-t | border-top-width: 1px; |
border-t-<數字> | border-top-width: <數字>px; |
border-t-(length:<自訂屬性>) | border-top-width: var(<自訂屬性>); |
border-t-[<值>] | border-top-width: <值>; |
border-r | border-right-width: 1px; |
border-r-<數字> | border-right-width: <數字>px; |
border-r-(length:<自訂屬性>) | border-right-width: var(<自訂屬性>); |
border-r-[<值>] | border-right-width: <值>; |
border-b | border-bottom-width: 1px; |
border-b-<數字> | border-bottom-width: <數字>px; |
border-b-(length:<自訂屬性>) | border-bottom-width: var(<自訂屬性>); |
border-b-[<值>] | border-bottom-width: <值>; |
border-l | border-left-width: 1px; |
border-l-<數字> | border-left-width: <數字>px; |
border-l-(length:<自訂屬性>) | border-left-width: var(<自訂屬性>); |
border-l-[<值>] | border-left-width: <值>; |
divide-x | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: 1px; } |
divide-x-<數字> | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: <數字>px; } |
divide-x-(length:<自訂屬性>) | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: var(<自訂屬性>); } |
divide-x-[<值>] | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: <值>; } |
divide-y | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: 1px; } |
divide-y-<數字> | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: <數字>px; } |
divide-y-(length:<自訂屬性>) | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: var(<自訂屬性>); } |
divide-y-[<值>] | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: <值>; } |
divide-x-reverse | --tw-divide-x-reverse: 1; |
divide-y-reverse | --tw-divide-y-reverse: 1; |
範例
基本範例
使用 border 和 border-<數字> 工具類別，例如 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 的工具類別來在子元素之間添加邊框
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-[<值>] 語法 來設定邊框寬度基於完全自訂的值
<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>在變體文件中了解更多關於使用變體的資訊。
