border-widthプロパティ
border-widthプロパティの概要
機能 |
ボーダー(枠線)の太さの定義 |
指定可能な値 |
長さ、thin, medium, thick |
初期値 |
medium |
継承 |
しない |
適用可能なボックス |
全て |
border-widthプロパティは、要素のボーダー(枠線)の太さを定義します。ただし、borderや、border-styleプロパティで枠線が定義されていないと、このborder-widthプロパティは意味を持ちません。
border-widthプロパティの値には、実際の太さを記述するか、次のようなキーワードを指定することができます。
枠線のスタイル
値 |
表示形態 |
thin |
細い |
medium |
通常(デフォルト値) |
thick |
太い |
どのように表示されるかは、次の入力例の確認ページを見てください。
example.css
div.thin {
border-style: solid;
border-width: thin;
}
div.medium {
border-style: solid;
border-width: medium;
}
div.thick {
border-style: solid;
border-width: thick;
}
div.number {
border-style: solid;
border-width: 20px;
}
div.number2 {
border-style: dotted;
border-width: 10px;
}
各辺を個別に設定
border-widthの値をスペースで区切って、複数指定すると、各辺の線を個別に設定することができます。ただし、この方法は、直感的に分かりやすいとは思えないので、あまりお勧めしません。
値を指定する数による、個々の辺の設定
値の数 |
設定される辺 |
1 |
4辺全て |
2 |
最初の値が上下、2番目の値が左右 |
3 |
最初の値が上、2番目の値が左右、3番目の値が下 |
4 |
最初の値が上、2番目の値が右、3番目の値が下、4番目の値が左 |
example2.css
div.number1 {
border-style: solid;
border-width: 2px;
}
div.number2 {
border-style: solid;
border-width: 2px 10px;
}
div.number3 {
border-style: solid;
border-width: 2px 10px 18px;
}
div.number4 {
border-style: solid;
border-width: 2px 10px 18px 26px;
}
このborder-widthプロパティはあまり使用されません
borderプロパティを使用すれば、枠線の太さに関する指定も可能ですので、通常はborder-widthプロパティを使用せずに、borderプロパティを使用します。