HTML & CSS

リファレンス

CSS

ボーダー ウィズ

border-widthプロパティ

要素の4辺に引くボーダーの太さを指定します。

  • 初期値

    medium

  • 継承

    不可

  • 適用できる要素

    全要素

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

thin

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

medium

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

thick

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

数値

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


パターン1

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

CSSコード例

border-width: 8px;

表示例:


パターン2

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

CSSコード例

border-width: thin thick;

表示例:


パターン3

値を3つ指定した場合、1つ目の「medium」はtopに、2つ目の「thin」はleftrightに、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;

表示例:

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。