Webデザイナーブログから学ぶホームページ制作

「border-width」プロパティは、ボーダー（境界線）の太さをまとめて指定するCSSプロパティです。
ボーダー（境界線）の太さをまとめて指定する値は、「上部の太さ」「右側の太さ」「下部の太さ」「左側の太さ」などの指定ができます。

ボーダー（境界線）の太さをまとめて指定する値は「上部の太さ」「右側の太さ」「下部の太さ」「左側の太さ」の順に値を指定することができます。
ボーダー（境界線）の太さをまとめて指定する値は「px」「em」などの値を指定することができます。 また、「border-width」プロパティと同時に設定が出来るプロパティの種類がいくつかあります。

【プロパティの種類】
・border-width
・border-color
・border-style

ボーダー（境界線）の太さをまとめて指定する場合は、「border-width」プロパティを使い適応する値を指定することで実装できます。

セレクタ{
border-width:ボーダー（境界線）の太さ（上 右 下 左）;
}

/* px値 */
border-width: 1px;/* 上下左右 */
border-width: 1px 4px;/* 上下と左右 */
border-width: 1px 4px 6px;/* 上と左右と下 */
border-width: 1px 4px 6px 8px;/* 上と右と下と左 */

/* em値 */
border-width: 1em;/* 上下左右 */
border-width: 1em 4em;/* 上下と左右 */
border-width: 1em 4em 6em;/* 上と左右と下 */
border-width: 1em 4em 6em 8em;/* 上と右と下と左 */

/* 基本値（使い方①） */
border-color: red;
border-style: solid;
border-width: 4px;

/* 基本値（使い方②） */
border-color: #000000;
border-style: double;
border-width: 1px 4px;

/* 基本値（使い方③） */
border-color: #ff7200;
border-style: dashed;
border-width: 1px 4px 6px 8px;