基礎29. 枠線のプロパティ（border）

borderプロパティ（ボーダー）

borderプロパティは要素（タグ）の枠線の指定です。borderプロパティは線の色（border-color）線の幅（border-width）線の種類（border-style）の3つのプロパティで構成されます。borderは要素の外側にできるので幅、高さに加算されます。設計の際は注意してください。

/* 4方向に線を指定 */
div{
  /* 線の色 */
  border-color: #000000;
  /* 線の太さ */
  border-width: 1px;
  /* 線の種類 */
  border-style: solid;
}

borderのショートハンド

ショートハンドという省略記法で指定すると下記のようになります。各値は半角スペースで区切ります。boderは各プロパティごとに指定するとコードが長くなるためショートハンドが良く使用されます。

/* 直線で指定（ショートハンド） */
div{
  border: #000000 1px solid;
}
/* 破線で指定（ショートハンド） */
div{
  border: #000000 1px dashed;
}

/* 点線で指定（ショートハンド）*/
div{
  border: #000000 1px dotted;
}

ショートハンドで記述する場合、値の順番は特にありません。ただし3つの値（色、太さ、種類）を必ず指定する必要があります。

/* 値の順番は入れ替えても、結果は変わりません。 */
div{
  border: #000000 1px solid;
}
div{
  border: 1px #000000 dashed;
}
div{
  border: dotted #000000 1px;
}

方向で指定

borderプロパティは4方向（上下左右）それぞれで指定も可能です。

/* 上方向に指定 */
div{
  border-top-color: #000000;
  border-top-width: 1x;
  border-top-style: solid;
}

/* 上方向に指定（ショートハンド） */
div{
  border-top: #000000 1px solid;
}

/* 下方向に指定 */
div{
  border-bottom-color: #000000;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

/* 下方向に指定（ショートハンド） */
div{
  border-bottom: #000000 1px solid;
}

/* 左方向に指定 */
div{
  border-left-color: #000000;
  border-left-width: 1px;
  border-left-style: solid;
}

/* 左方向に指定（ショートハンド） */
div{
  border-left: #000000 1px solid;
}

/* 右方向に指定 */
div{
  border-right-color: #000000;
  border-right-width: 1px;
  border-right-style: solid;
}

/* 右方向に指定（ショートハンド） */
div{
  border-right: #000000 1px solid;
}

まとめ

• borderは線の色（border-color）線の太さ（border-width）線の種類（border-style）の3つで構成される
• borderは幅、高さに加算される