Border

Tailwind CSSは、境界線を指定するために、さまざまなユーティリティクラスを用意しています。

Cheat sheet

各項目を選ぶことで、任意の境界線を作成できます。

HTML

<div class="">
Border example
</div>

サンプル

Border example

Width

Tailwind CSSでは、ボーダー(境界線)の幅を指定するためのユーティリティクラスを用意しています。

Tailwind CSSのborderクラス
クラス CSSプロパティ
border-0 border-width: 0;
border border-width: 1px;
border-2 border-width: 2px;
border-4 border-width: 4px;
border-8 border-width: 8px;
border-t-0 border-top-width: 0;
border-t border-top-width: 1px;
border-t-2 border-top-width: 2px;
border-t-4 border-top-width: 4px;
border-t-8 border-top-width: 8px;
border-r-0 border-right-width: 0;
border-r border-right-width: 1px;
border-r-2 border-right-width: 2px;
border-r-4 border-right-width: 4px;
border-r-8 border-right-width: 8px;
border-b-0 border-bottom-width: 0;
border-b border-bottom-width: 1px;
border-b-2 border-bottom-width: 2px;
border-b-4 border-bottom-width: 4px;
border-b-8 border-bottom-width: 8px;
border-l-0 border-left-width: 0;
border-l border-left-width: 1px;
border-l-2 border-left-width: 2px;
border-l-4 border-left-width: 4px;
border-l-8 border-left-width: 8px;

Color

Tailwind CSSでは、ボーダー(境界線)の色を指定するためのユーティリティクラスを用意しています。

境界線の色
クラス CSSプロパティ
border-transparent border-color: transparent;
border-black border-color: #000;
border-white border-color: #fff;
border-transparent border-color: transparent;
border-gray-100 border-color: #f7fafc;
border-gray-200 border-color: #edf2f7;

Style

Tailwind CSSでは、ボーダー(境界線)のスタイルを指定するためのユーティリティクラスを用意しています。

Tailwind CSSのborderクラス
クラス CSSプロパティ
border-solid border-style: solid;
border-dashed border-style: dashed;
border-dotted border-style: dotted;
border-double border-style: double;
border-none border-style: none;

Radius

Tailwind CSSでは、ボーダー(境界線)のスタイルを指定するためのユーティリティクラスを用意しています。

Tailwind CSSのborderクラス
クラス CSSプロパティ
rounded-none border-radius: 0;
rounded-sm border-radius: .125rem;
rounded border-radius: .25rem;
rounded-lg border-radius: .5rem;
rounded-full border-radius: 9999px;
rounded-t border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
rounded-r border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
rounded-b border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
rounded-l border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;