border-widthプロパティ
border-widthプロパティの概要
| 機能 |
ボーダー（枠線）の太さの定義 |
| 指定可能な値 |
長さ、thin, medium, thick |
| 初期値 |
medium |
| 継承 |
しない |
| 適用可能なボックス |
全て |
border-widthプロパティは、要素のボーダー（枠線）の太さを定義します。ただし、borderや、border-styleプロパティで枠線が定義されていないと、このborder-widthプロパティは意味を持ちません。
border-widthプロパティの値には、実際の太さを記述するか、次のようなキーワードを指定することができます。
枠線のスタイル
| 値 |
表示形態 |
| thin |
細い |
| medium |
通常（デフォルト値） |
| thick |
太い |
どのように表示されるかは、次の入力例の確認ページを見てください。
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番目の値が左 |
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プロパティを使用します。
|
2009 W-D-L.NET
border-xxx-style
このページの先頭