outlineプロパティは、アウトライン（輪郭線）の幅（outline-width）、種類（outline-style）、色（outline-color）を一括で指定できる簡略化表記です。
各値は、任意の順番で半角スペースなどの空白類文字で区切って書きます。この際、指定をしなかった値に関しては初期値にリセットされます。

アウトライン関連のプロパティは、ボタンや動作中のフォーム、イメージマップなどの周りにアウトラインを描画します。これにより、任意の要素を目立たせたりすることが可能です。
見た感じや使える値がボーダー関連プロパティと似ていますが、以下の点が異なっています。

ボーダーとアウトラインの違い

アウトラインはスペースを取りません

アウトラインはボーダー辺のすぐ外側に描画され、ボックスの上に重ねて描画されます。
このため、アウトラインを動的に変化させたとしてもレイアウトに影響を及ぼしません。

アウトラインは長方形であるとは限りません

アウトラインは対象の形状に沿った形で描画されるため、長方形になるとは限りません。
このため、ボーダーのように上下左右個別に指定する事はできません。

ブラウザの対応状況が違います

残念ながら、IE6, 7は対応していません。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

[<outline-color>||<outline-style>||<outline-width>]｜inherit

初期値

個別のプロパティを参照します

適用される要素

全ての要素

継承

しません

パーセント値

N/A

メディア

visual, interactive

outlineのサンプル

p {
  margin: 20px;
}

p input {
  margin: 10px 0;
  padding: 3px 5px;
  width: 300px;
}

p input:focus.sample01 {
  outline: 3px solid blue;
}

p input:focus.sample02 {
  outline: dotted #666;
}

p input:focus.sample03 {
  outline: 5px groove #d5d4ca;
}

<p>
<input value="3px solid blue;" size="25" name="01" class="sample01" type="text" />
<br />
<input value="dotted #666" size="25" name="02" class="sample02" type="text" />
<br />
<input value="5px groove #d5d4ca" size="25" name="03" class="sample03" type="text" />
</p>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示