border

borderは、枠線のスタイルを一括して指定するスタイルです。

解説

枠線に関するスタイルをまとめて指定する時に使用します。
指定できるスタイルは以下３つです。

• border-style
• border-color
• border-width

値と値の間は半角スペースで区切って指定します。
値の順番に決まりはありません。
３つ全ての値を指定しなくてもOKですが、border-styleの値だけは必須です。

構文

構文は以下になります。

値の順番はこの通りでなくとも構いません。

値

borderに指定できる値は、下記それぞれのページをご覧ください。

• border-style
• border-color
• border-width

サンプル

枠線を1px、solid、blueで指定する

.sample01 {
  border:1px solid blue;
}

<div class="sample01">1px、普通線、青色</div>

枠線をdashed、greenで指定する

.sample01 {
  border:dashed green;
}

<div class="sample01">破線、緑色</div>

備考

• スタイル（border-style）の値だけは必須です。
  （-width値と -color値は必須ではありません。）

関連項目

• border：枠線に関するスタイルをまとめて指定する
• border-color：枠線の色を指定する
• border-radius：枠線の角の丸みを指定する
• border-style：枠線のスタイルを指定する
• border-width：枠線の太さを指定する

Tweet