border-width

border-widthは、枠線の太さを指定するスタイルです。

解説

枠線の太さを、キーワードまたは数値で指定します。

また、要素に対して上下左右それぞれの枠線の太さをを個別に指定できます。

• 値を１つ指定した時：指定した値が上下左右に適用されます。
• 値を２つ指定した時：１つ目が上下、２つ目が左右に適用されます。
• 値を３つ指定した時：１つ目が上、２つ目が左右、３つ目が下に適用されます。
• 値を４つ指定した時：１つ目が上、２つ目が右、３つ目が下、４つ目が左に適用されます。

構文

構文は以下になります。

値

border-widthには以下の値が指定できます。

border-widthの初期値は「medium」です。

サンプル

枠線を太くする（2pxを指定）

.sample01 {
  border-style:solid;
  border-width:2px;
}

<div class="sample01">border-width:2px;</div>

枠線を太くする（thickを指定）

.sample01 {
  border-style:solid;
  border-width:thick;
}

<div class="sample01">border-width:thick;</div>

枠線を太くする（上1px、右2px、下3px、左4px）

.sample01 {
  border-style:solid;
  border-width:1px 2px 3px 4px;
}

<div class="sample01">border-width:1px 2px 3px 4px;</div>

備考

• 太さ"medium"がデフォルト値なので、通常の太さの場合は明示的な指定は不要です。

関連項目

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

Tweet