アウトラインの幅(太さ)を設定する

CSS - outline-width

概要

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>

上記のサンプルを見るとわかりますが、テキストの上下間の余白がバラバラにみえます。これはアウトラインの太さの幅に関しては、いくら太くしても要素の幅に含まれないということなのです。使用する際には気をつけておきたいポイントの1つです。

値については数値、またはキーワードを入れることができます。キーワードとはthin(細い)、medium(普通)、thick(太い)のいづれかを指します。まとめるとこのようになります。

説明
value単位はpx, %, emなどが可能です。マイナス値は入れられません
keywordthin, 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>

仕様書

関連CSSプロパティ