ボックスを囲む

ボックスの四辺にボーダーラインを引いて囲む

背景同様に良く使われる基本テクニック

ボックスにボーラーラインを引く

ボーダーライン自体は、CSS の border プロパティを使う

周囲の余白（スペース）に配慮が必要

• ボーダーとコンテンツの間にスペースを作る時はパディング
• 隣接するほかのボックスとの間にスペースを作る時はマージンを使用する

border プロパティ

ボックスの四辺にボーダーラインを引くには border プロパティを使う

書式: border プロパティ

border: ①線の太さ ②線の形状 ③線の色;

線の太さ

線の太さを指定する

単位は通常 px を使うが、em、rem、pt でも構わない

線の形状

実線や点線など、ボーダーラインの形状をキーワードで指定する

• none: 線を引かない
• dotted: 点線
• dashed: 長めの点線
• solid: 実線
• double: 二重線（線の太さを 3px 以上に設定）

線の色

線の色を指定する

ボーダーを一辺ずつ指定するには

ボックスの周囲のいずれかにボーダーラインを引きたいときには、上下左右を指定するプロパティを用いる

CSS: ボックスの下辺に 3px の 点線のボーダーラインを引く

border-bottom: 3px dotted #28b0b4;

一辺ごとにボーダーラインを設定するプロパティ

• border-top: ボックスの上辺に引く
• border-right: ボックスの右辺に引く
• border-bottom: ボックスの下辺に引く
• border-left: ボックスの左辺に引く

テンプレートファイル