Home / 枠線の太さの指定 / 上下左右の枠線の太さをまとめて指定 : border-width

上下左右の枠線の太さをまとめて指定 : border-width

::: 書 式 :::
border-width: 上側の枠線太さ 右側の枠線太さ 下側の枠線太さ 左側の枠線太さ

::: プロパティ値 :::
枠線の太さには、下記の値を指定します。
  • 単位付きの数値 => 「単位について 」を参照
  • thin(細線)
  • medium(初期値:中太線)
  • thick(太線)

::: 解 説 :::
border-width」プロパティで、上下左右の枠線の太さを一度に設定できます。

それぞれの値を半角スペースで区切ります。

また、指定した値の個数により、下記のように枠線の太さが設定されます。

・値が1つの場合: ①上下左右の枠線太さ
・値が2つの場合: ①上下の枠線太さ ②左右の枠線太さ
・値が3つの場合: ①上側枠線太さ ②左右の枠線太さ ③下側枠線太さ
・値が4つの場合: ①上側枠線太さ ②右側枠線太さ ③下側枠線太さ ④左側枠線太さ

::: 対応ブラウザ :::
IE Firefox Opera Chrome Safari
8 7 6 5.5 5 3.5 3 2 1.5 1 10 9 8 7 6 2 1 4 3 2 1
[ 対応状況 : ○=対応、△=一部対応、×=未対応 ]

::: サンプル ::: [ サンプル画面 スタイルシート(CSS)サンプル画面 ]


関連項目