outline-widthプロパティ は，輪郭の太さを指定します。

outlineプロパティ で指定する輪郭は，border プロパティ で指定する境界とは，次のような点で異なります。

1. 隣接要素との間に新たにスペースを確保しません。　つまり，境界外の隣接要素内などに表示されます。
2. 形は長方形に限定されません。

なお，値は半角ブランクを挟んで４つまで指定できます。

1. 指定する値の個数にかかわらず，値の順序は，最初から， 上の値 → 右の値 → 下の値 → 左の値 と決まっています。　（上から時計回り）
2. 値を３つ指定した場合は，省略された 左の値 は 右の値 と同じになります。　
3. 値を２つ指定した場合は，さらに，省略された 下の値 は 上の値 と同じになります。
4. 値を１つだけしか指定しない場合は，それが 上下左右すべての値になります。

数値による値の指定は，次のような単位を付けて可能です。

ただし，実際には，輪郭の太さにそれほど大きな値を指定することは少ないので，"px" を使う場合がほとんどです。

また，"thin"，"medium"，"thick" のキーワードによる指定内容は，次の通りです。

輪郭が表示される場所に別の要素の内容や境界線が表示されている場合は， 輪郭で上書きされますのでレイアウトや輪郭のスタイルに注意が必要です。

<style type="text/css" media="screen, handheld, print, tv" >
<!--
   input.sample:focus { 
      outline-width: 3px;
      outline-style: solid;
      outline-color: #ddff88;
   }
-->
</style>
<script type="text/javascript">
   window.onload = function() {
      document.getElementById('ans1').focus();
   }
</script>

<div>問１：<input type="text" class="sample" id="ans1"></div><br>
<div>問２：<input type="text" class="sample" id="ans2"></div><br>
<div>問３：<input type="text" class="sample" id="ans3"></div>

上の例では，フォーカスのある input要素 に対して輪郭が表示されます。

輪郭の表示される場所は， input要素 の境界外の親要素（div要素）や，さらに，その隣接要素などです。 （輪郭をもっと太くするとさらによくわかります。）