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

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

      2017/07/11   hatano

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

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

border-colorプロパティ

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

border-widthプロパティ

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

border-styleプロパティ

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

borderのショートハンド

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

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

方向で指定

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

まとめ

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

広告

 - HTML・CSS