ボーダーの幅をまとめて指定する
border-width
{
border-width
border-widthプロパティは、ボーダーの幅(太さ)をまとめて指定するショートハンドです。
初期値 | 各プロパティに準じる |
---|---|
継承 | なし |
適用される要素 | すべての要素 |
モジュール | Backgrounds and Borders Module Level 3 |
値の指定方法
指定できる値はborder-width系の各プロパティと同様です。それぞれの値は半角スペースで区切って4つまで指定でき、上辺、右辺、下辺、左辺の順に適用されます。いずれかの値を省略した場合は以下のような指定となります。
- 値が1つ すべての辺に同じ値が適用されます。
- 値が2つ 1つ目が上下辺、2つ目が左右辺に適用されます。
- 値が3つ 1つ目が上辺、2つ目が左右辺、3つ目が下辺に適用されます。
サンプルコード
div { border-top-width: 10px; border-right-width: 10px; border-bottom-width: 2px; border-left-width: 10px; }
上の例は、border-widthプロパティを利用して以下のように指定できます。四辺すべてのボーダーの幅を10pxに指定したあと、border-bottom-widthプロパティで下辺のみ2pxで上書きしています。
div { border-width: 10px; border-bottom-width: 2px; }