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 は干渉しない。また外側にある他の要素に重なってもレイアウトには影響しない。
ガチガチに組まれた職人的デザインでも安心か。