プロパティ border-width

プロパティ border-width は、すべての辺のボーダーの太さを同時に、または各辺ごとに個別に設定します。これは、プロパティ border-left-width、border-right-width、border-top-width、border-bottom-width の一括指定プロパティです。

プロパティの値は、パーセントを除くあらゆるサイズの単位、またはキーワード thin (2 ピクセルのボーダー)、medium (4 ピクセルのボーダー)、thick (6 ピクセルのボーダー) です。デフォルト値は medium です。

構文

セレクタ {
	border-width: 1、2、3、または4つの値;
}

値の数

プロパティは、空白で区切られた 1、2、3、または 4 つの値を受け取ることができます：

数	説明
`1`	すべての辺に同時に適用されます。
`2`	最初の値は上下のボーダーに、2番目の値は左右のボーダーに適用されます。
`3`	最初の値は上のボーダーに、2番目の値は左右のボーダーに、3番目の値は下のボーダーに適用されます。
`4`	最初の値は上のボーダーに、2番目の値は右のボーダーに、3番目の値は下のボーダーに、4番目の値は左のボーダーに適用されます。

例

1ピクセルの太さのボーダーを設定します：

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

例

4 ピクセルの太さのボーダーを設定します：

<div id="elem"></div>

#elem {
	border-width: 4px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

例

上下のボーダーの太さを 1px、左右のボーダーの太さを 4px に設定します：

<div id="elem"></div>

#elem {
	border-width: 1px 4px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

例

上のボーダーの太さを 1px、左右のボーダーの太さを 4px、下のボーダーの太さを 6px に設定します：

<div id="elem"></div>

#elem {
	border-width: 1px 4px 6px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

例

上のボーダーの太さを 1px、右のボーダーの太さを 4px、下のボーダーの太さを 6px、左のボーダーの太さを 8px に設定します：

<div id="elem"></div>

#elem {
	border-width: 1px 4px 6px 8px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

例

キーワード thin を使用してボーダーの太さを設定します：

<div id="elem"></div>

#elem {
	border-width: thin;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

例

キーワード medium を使用してボーダーの太さを設定します：

<div id="elem"></div>

#elem {
	border-width: medium;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

例

キーワード thick を使用してボーダーの太さを設定します：

<div id="elem"></div>

#elem {
	border-width: thick;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

例

異なる辺に異なるボーダーを設定します：

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

プロパティ border-width

構文

値の数

例

例

例

例

例

例

例

例

例

関連項目