border-width

例

基本的な例

要素のすべての辺のボーダー幅を設定するには、border または border-<number> ユーティリティ（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>

水平および垂直方向の辺

要素の 2 辺のボーダー幅を同時に設定するには、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>

カスタム値の使用

以下を使用してください border-[<value>] 構文 を設定するにはボーダー幅完全にカスタムの値に基づいて

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

CSS 変数の場合は、以下も使用できます。 border-(length:<custom-property>) 構文

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

これは単なる border-[lengthvar(<custom-property>)] の省略形であり、var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa border-width ユーティリティ に md: のようなブレークポイントバリアントを付けると、ユーティリティがmedium 画面サイズ以上でのみ適用されます。

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

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。