outline って、なんか影が薄い気がする。（※個人の感想です）
概要
outline は、要素の輪郭線を指定する。
輪郭線は border（境界線）の外側に描画され、多くは四角の枠線となる。
使い方は border とおおむね同じだが、以下の違いがある。
- 上下左右を個別に設定できない
- 角丸（border-radius）に相当するものがない
- outline-offset なるプロパティで表示位置を調整できる（ただしIEでは全てのバージョンでサポートされない）
（※厳密には、outline は outline-style、outline-width、outline-color の3つのプロパティを同時に指定するショートハンド）
outline-offset 以外は CSS2.1 で勧告されたプロパティであり、よほど古いブラウザでなければ利用できる。
特徴と応用例
outline は border と同程度以下の表現しかできないが、ボックスモデルから独立して設定でき、レイアウトに影響しないという特徴がある。border と同時使用すれば1つのボックス要素に2種類の枠線を描ける。
用途としては、ブラウザのフォーカス枠（キーボードで操作する場合などに現れる）の表示、入力フォームにおける必要項目や重要な段落のハイライトなど、一時的に使われるケースが多いように思われる。
しかし、もっぱら視覚デザインのためにのみ使われる要素ならば、恒常的に outline を表示させてもよいだろう。
border と outline で枠線を２つ引く
下の例は、赤いドットの border の外側に、黄色いドットの outline を表示している。
/* 枠線を２つ引く */
div{
border: 0.6em #f00000 dotted;
outline: 0.8em #ffdd00 dotted;
}
outline-offset で表示位置を変える
下の例は、赤色の border の少し内側に、黄色の outline を重ねて表示している。黄色は半透明なので、重なった部分がオレンジ色になっている。
outline-offset は、outlineの表示位置を border外側からの相対距離で指定する。IEでは全てのバージョンでサポートされない。
マイナス値にすれば borderの線上や内側に outlineを表示できる。
div{
padding: 1em;
border: 1em #ff0000 solid;
outline: 1em #ffff0080 solid;
outline-offset: -1.5em;
}
border の場合、太さ（border-width）を変えるとコンテンツ領域のサイズに影響するが、outline は干渉しない。また外側にある他の要素に重なってもレイアウトには影響しない。
ガチガチに組まれた職人的デザインでも安心か。