最終更新日:
公開日:
リファレンス
CSS
ボーダー ウィズ
border-widthプロパティ
要素の4辺に引くボーダーの太さを指定します。
-
初期値
medium
-
継承
不可
-
適用できる要素
全要素
値
次の値をスタイルとして指定することができます。
- 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;
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。