tailwindcss-borders

Tailwind CSS v4.3 のボーダー関連ユーティリティの完全なリファレンスです。ボーダーの幅・色・スタイルと各辺のバリエーション（v4.2 以降の論理プロパティ `border-bs`／`border-be` を含む）、`rounded-*` によるボーダー半径（各コーナーを含む）、`outline-*` と `outline-offset`、`ring-offset` を使ったボックスシャドウベースの `ring-*`、子要素間の区切り線を設定する `divide-*` を扱います。

v4.0 でのデフォルトの ring 幅の変更（3px → 1px。v3 の動作には ring-3 を使用）と、各コーナーのボーダー半径の改善について説明します。

Tailwind CSS のボーダースキル

Tailwind CSS v4.3 のボーダー関連ユーティリティの完全なリファレンスです。

目次

• ボーダー幅 - border、border-x、border-y、border-t、border-r、border-b、border-l、論理プロパティの border-s、border-e、border-bs、border-be（v4.2 以降の block-start/end）
• ボーダー色 - border-{color}、各辺のボーダー色
• ボーダースタイル - border-solid、border-dashed、border-dotted、border-double
• ボーダー半径 - rounded、rounded-t、rounded-r、rounded-b、rounded-l、rounded-tl、rounded-tr、rounded-bl、rounded-br、rounded-full
• アウトライン - outline、outline-{width}、outline-{color}、outline-offset
• リング - ring、ring-{width}、ring-{color}、ring-offset、ring-offset-{color}
• 区切り線 - divide-x、divide-y、divide-{color}、divide-{style}

主な機能

• 幅、色、スタイルのオプションによる包括的なボーダー設定
• 細かな制御を可能にする各辺ごとのボーダーカスタマイズ
• アクセシブルなフォーカスインジケーターとしてのリングシャドウ
• 子要素を区切るための divide ユーティリティ
• デザイントークンを通じたフルカラーパレットへの対応
• レスポンシブおよび状態バリアントへの対応

v4 の更新点

• v4.0 でデフォルトの ring 幅が 3px から 1px に変更されました（v3 の動作には ring-3 を使用してください）
• 論理プロパティのブロック軸ボーダー border-bs-*／border-be-*（border-block-start／border-block-end）が v4.2 で追加されました
• outline-offset によるアウトラインのカスタマイズが強化されました
• コーナーごとのクラスにより、ボーダー半径が改善されました
• 任意の値で CSS 変数を使用できるようになり、型安全性が向上しました

詳細なリファレンス

• border.md - ボーダーの幅・色・スタイル、ボーダー半径、各辺のボーダーパターンを設定する場合に読み込みます
• outline.md - フォーカス状態やアクセシビリティ状態向けにアウトラインの幅・色・オフセットを設定する場合に読み込みます
• ring.md - ボックスシャドウベースのリングや、子要素間の divide-* 区切り線を作成する場合に読み込みます