border-widthプロパティ

値

次の値をスタイルとして指定することができます。

thin

細いボーダーを表示します。

medium

通常のボーダーを表示します。

thick

太いボーダーを表示します。

数値

ボーダーの太さを任意の数値で指定します。

パターン1

4辺のボーダーの太さを8pxで一括指定した例です。

CSS コード例

border-width: 8px;

表示例

パターン2

値を2つ指定した場合、1つ目の「thin」はtop、bottomに適用され、2つ目の「thick」はleft、rightに適用されます。

CSS コード例

border-width: thin thick;

表示例

パターン3

値を3つ指定した場合、1つ目の「medium」はtopに、2つ目の「thin」はleft、rightに、3つ目の「thick」はbottomに適用されます。

CSS コード例

border-width: medium thin thick;

表示例

パターン4

次のように、4辺のボーダーそれぞれに対して個別にスタイルを指定することも可能です。
topだけ指定したい場合や、一括指定した後に特定のボーダーだけ太さを上書きしたい場合に使用します。

CSS コード例

border-top-width: 5px;
border-right-width: thin;
border-bottom-width: 1em;
border-left-width: thick;

表示例

パターン5

全ての辺のボーダーを一括指定した後に、topのボーダーだけ太さを上書きする例です。

CSS コード例

border-width: 1px;
border-top-width: 5px;

表示例