プロパティ border-width

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

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

構文

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

値の数

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

例

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

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

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

Результат:

例

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

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

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

Результат:

例

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

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

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

Результат:

例

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

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

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

Результат:

例

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

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

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

Результат:

例

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

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

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

Результат:

例

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

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

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

Результат:

例

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

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

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

Результат:

例

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

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

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

Результат:

関連項目