概要
CSSプロパティ｢outline-width｣ は、要素のアウトラインの幅（太さ）を指定する際に使用します。ショートハンドで記述するには outline プロパティを使います。
<p>初期値のアウトラインを表示</p>
<p class="width-1px">1pxのアウトラインを表示</p>
<p class="width-5px">5pxのアウトラインを表示</p>
<p class="width-10px">10pxのアウトラインを表示</p>
<p class="thin">thinで指定したのアウトラインを表示</p>
<p class="medium">mediumで指定したのアウトラインを表示</p>
<p class="thick">thickで指定したのアウトラインを表示</p>
<style>
p {
outline-color: orange;
outline-style: solid;
}
.width-1px {
outline-width: 1px;
}
.width-5px {
outline-width: 5px;
}
.width-10px {
outline-width: 10px;
}
.thin{
outline-width: thin;
}
.medium{
outline-width: medium;
}
.thick{
outline-width: thick;
}
</style>上記のサンプルを見るとわかりますが、テキストの上下間の余白がバラバラにみえます。これはアウトラインの太さの幅に関しては、いくら太くしても要素の幅に含まれないということなのです。使用する際には気をつけておきたいポイントの１つです。
値については数値、またはキーワードを入れることができます。キーワードとはthin（細い）、medium（普通）、thick（太い）のいづれかを指します。まとめるとこのようになります。
| 値 | 説明 |
|---|---|
| value | 単位はpx, %, emなどが可能です。マイナス値は入れられません |
| keyword | thin, medium, thickが入ります |
使用例
テキスト入力エリアに表示されるアウトラインの幅をそれぞれ変更してます。
<div>リスト1：<input type="text" class="outline-width-1px" id="item1"></div>
<div>リスト2：<input type="text" class="outline-width-3px" id="item2"></div>
<div>リスト3：<input type="text" class="outline-width-5px" id="item3"></div>
<style>
div {
margin-bottom: 10px;
}
input:focus {
outline-color: orange;
outline-style: solid;
}
.outline-width-1px {
outline-width: 1px;
}
.outline-width-3px {
outline-width: 3px;
}
.outline-width-5px {
outline-width: 5px;
}
</style>