HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

  1. ホーム
  2. HTML・CSS
  3. 基礎29. 枠線のプロパティ(border)

基礎29. 枠線のプロパティ(border)

  1. 公開日:2016年06月01日
  2. 最終更新日:2022年08月10日

HTML・CSS

この記事をシェアする:

borderプロパティ(ボーダー)

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

border-colorプロパティ

枠線の色の指定。値は主にカラーコードで指定します。

border-widthプロパティ

線の太さの指定。単位はpxで指定します。

border-styleプロパティ

線の種類の指定。値は直線(solid)破線(dashed)点線(dotted)が主に使われます。


/* 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は幅、高さに加算される