“border-width”プロパティ:境界線の太さ

概要

“border-width”プロパティは境界線の太さを指定する以下のプロパティの一括指定プロパティです。

• “border-top-width”プロパティ
• “border-right-width”プロパティ
• “border-bottom-width”プロパティ
• “border-left-width”プロパティ

既定では“border-width”プロパティで指定される境界線の太さは“width”プロパティと“height”プロパティでサイズが指定されるコンテント・ボックスよりも外側に配されます。

サンプルコード

div { border-width: 10px;}


値

値の指定方法

値が1つの場合は4つすべての辺の境界線の太さとなります。

div { border-width: 〚境界線の太さ〛;}


また、複数の値をホワイトスペースで区切って記述することができます。値の個数によってそれぞれの値が対応する辺が変わります。

• 2つの場合は1つ目の値が上下、2つ目の値が左右の辺に適用されます。
• 3つの場合は1つ目の値が上、2つ目の値が左右、3つ目の値が下の辺に適用されます。
• 4つの場合は1つ目の値が上、2つ目の値が右、3つ目の値が下、4つ目の値が左の辺に適用されます。

border-width: 〚すべての辺〛;
border-width: 〚上下〛 〚左右〛;
border-width: 〚上〛 〚左右〛 〚下〛;
border-width: 〚上〛 〚右〛 〚下〛 〚左〛;


仕様書

定義されている仕様書

border-width

thin
medium
thick
<length>

キーワード値で指定する

div {

border-style: solid;
border-width: thin;

}

border-width: thin;

div {

border-style: solid;
border-width: medium;

}

border-width: medium;

div {

border-style: solid;
border-width: thick;

}

border-width: thick;

“<length>”値で指定する

div {

border-style: solid;
border-width: 5px;

}

border-width: 5px;

div {

border-style: solid;
border-width: 5em;

}

border-width: 5em;

それぞれの辺の境界線の太さを指定する

div {

border-style: solid;
border-width: 5px 10px 15px 20px;

}

border-width: 5px 10px 15px 20px;

div {

border-style: solid;
border-width: 5px 10px 15px;

}

border-width: 5px 10px 15px;

div {

border-style: solid;
border-width: 5px 10px;

}

border-width: 5px 10px;