Tailwind CSS ボーダー

Tailwind CSS では、ボーダー（Borders）はレイアウトやデザインで一般的なスタイルで、要素に境界線や区切り線を追加するために使用されます。

Tailwind は、ボーダーの幅・色・スタイル・半径・各方向のボーダーを制御するためのさまざまなボーダーユーティリティクラスを提供しています。

ボーダーの幅（Border Width）

ボーダーの幅は、要素の境界線の太さを決定します。Tailwind CSS は異なるボーダー幅の値を提供しており、要素のボーダースタイルをすばやく制御できます。

ボーダーの色（Border Color）

を使用することでborder-{color}ユーティリティクラスを使用すると、要素のボーダー色を設定できます。Tailwind CSS は多数の定義済みカラーを提供しており、そのまま使用できるほか、カスタムカラーにも対応しています。

<div class="border-2 border-red-500 p-4">
  红色边框，宽度为 2px
</div>

ボーダースタイル（Border Style）

Tailwind CSS は、実線・破線・点線などのボーダースタイルの設定にも対応しています。border-{style}ユーティリティクラスを使用すると、ボーダーの表示スタイルを制御できます。

<div class="border-4 border-dashed border-blue-400 p-4">
  蓝色虚线边框，宽度为 4px
</div>

ボーダー半径（Border Radius）

設定によってborder-radius、要素の角丸効果を制御できます。Tailwind CSS はさまざまなボーダー半径の値を提供し、方向ごとに異なる角丸を設定することもできます。

<div class="border-4 border-gray-400 rounded-lg p-6">
  大圆角边框
</div>

4方向のボーダー制御

各方向（上、右、下、左）のボーダーを個別に制御できます。例：border-t-2上ボーダーの幅を制御し、border-r-4右ボーダーの幅を制御する、などです。

<div class="border-t-4 border-r-2 border-b-1 border-l-3 border-blue-500 p-4">
  自定义各个方向的边框
</div>

統一されたボーダー制御（Border）

すべてのボーダーに同じスタイルを設定したい場合は、borderユーティリティクラスを使用するだけです。他のユーティリティクラスと組み合わせて、色、スタイル、幅を制御できます。

<div class="border-4 border-solid border-green-500 p-4">
  绿色实线边框，宽度为 4px
</div>

内側と外側のボーダー（Box Model）

Tailwind CSS は、制御するためのボックスモデルのユーティリティクラスも提供しています。特に、内側と外側のボーダー、マージン、パディングなどです。

<div class="box-border border-4 border-red-500 p-4">
  边框包含在内的盒子模型
</div>

すべてのボーダーユーティリティを組み合わせた総合サンプル