ボックス要素のマージンとパディングの境目=ボーダーに線を引きます。要素を枠線で囲みたい場合に使うのが基本です。
border
border: [線の幅] [スタイル] [色];
スタイル、線の幅、色をまとめて指定するCSSプロパティです。四角の枠で囲む場合にいっぺんに指定できて便利です。
[値]の順番は、入れ替わっても問題はありません。各[値]と[値]の間は半角スペースで区切ります。
[色]の初期値は、transparent(透明)、[スタイル]の初期値は、noneですから、この二つのいずれかを省略すると、表示されません。[色]と[スタイル]は、必ず指定しましょう。
border: 1px solid #070;
四角い枠で囲まれます
線の幅
長さの単位をつけて数値で指定できます。
文字で指定することもできます。
thin 細い / medium 中ぐらいの太さ / thick 太い
※省略した場合には、初期値 medium（適当な太さ）で表示されます。
スタイル
none 線は引かれませんが、他の重なった線が表示されます。
hidden 線は見えないだけで、他の線と重なった場合、線は引かれません。
solid 単実線
double 二重線 (ある程度太さが要ります。３px以上）
groove 谷型の線 (ある程度太さが要ります。表示は４px）
ridge 山形の線 (ある程度太さが要ります。表示は４px）
inset 凹型の線 (ある程度太さが要ります。表示は４px）
outset 凸型の線 (ある程度太さが要ります。表示は４px）
dotted 点線 (表示は２px）
dashed 破線 (表示は２px）
色
カラーコードで指定します。 色の指定
線の幅、スタイル、色の個別指定
border-style
スタイルを個別に指定するCSSプロパティです。４つの辺のスタイルを変えて設定できるようになります。
複数の値を指定する場合は、値と値の間は半角スペースで区切ります。
指定の反映順は、時計回りに上右下左となります。
指定順は、border-width、border-color でも同じです。
border-style: solid; /* 値が１つ */
border-style: solid double; /* 値が２つ */
border-style: solid double dotted; /* 値が３つ */
border-style: solid double dotted dashed; /* 値が４つ */
値が１つならば、４辺全て同じ
値が２つならば、上下と右左
値が３つならば、上と下と右左
値が４つならば、上 右 下 左の順で設定
border-width
線の幅を個別に指定するCSSプロパティです。４つの辺の線の幅を変えて設定できるようになります。
border-width: 1px 3px 5px 7px;
style が double の場合
border-color
色を個別に指定するCSSプロパティです。４つの辺の色を変えて設定できるようになります。
border-color: red blue orange green;
境界線の個別指定
border-left
border-left: solid red;
左だけ線を引きます。
border-top
border-top: solid red;
上だけ線を引きます。
border-right
border-right: solid red;
右だけ線を引きます。
border-bottom
border-right: solid red;
下だけ線を引きます。
上下だけ、左右だけなどの場合は組み合わせて使うことができます。
border-left: thick solid #77c;
border-bottom: thin solid #88d;
太さを変えて、左と下に線を引きます。
一か所だけ欠けているならば、
border-top: none; /* と書く方が */
コードを２行で済ませることができます。
