基礎

アウトラインスタイル

outline-styleプロパティ

outline-styleプロパティは要素の外側に敷くアウトライン（境界線）のスタイルを指定するためのプロパティです。アウトラインはborderプロパティで敷くボーダーよりも外側に描画されます。

outline-styleプロパティに指定できる値

outline-styleプロパティには次の値を設定することができます。

値	内容
`none`	初期値。アウトラインを表示しない。
`dotted`	点線で表示。「`dashed`」よりも細かい点線。
`dashed`	破線で表示。
`solid`	実線で表示。
`double`	2本の実線で表示。
`groove`	立体的に凹みのあるアウトラインを表示。
`ridge`	立体的なアウトラインを表示。「`groove`」とは反対に凸みが出る。
`inset`	立体的に凹みのあるアウトラインを表示。
`outset`	立体的に凸みのあるアウトラインを表示。

アウトラインは指定した要素の外側に線を敷くため、ボーダーよりも外側に表示されます。
親要素のmarginプロパティやpaddingプロパティの領域に重なる点に注意してください。

また、outline-styleプロパティは上下左右の4辺全てに一括指定することしかできないため、borderプロパティのように特定の辺だけ指定するといったことはできません。

アウトラインのスタイルを「none」（初期値）、太さ5px、カラーコード「#5cb7ff」で指定している例です。

.element1 {
  outline-style: none;
  outline-width: 5px;
  outline-color: #5cb7ff;
}

<p class="element1"></p>

アウトラインのスタイルを「dotted」、太さ5px、カラーコード「#5cb7ff」で指定している例です。

.element2 {
  outline-style: dotted;
  outline-width: 5px;
  outline-color: #5cb7ff;
}

<p class="element2"></p>

アウトラインのスタイルを「dashed」、太さ5px、カラーコード「#5cb7ff」で指定している例です。

.element3 {
  outline-style: dashed;
  outline-width: 5px;
  outline-color: #5cb7ff;
}

<p class="element3"></p>

アウトラインのスタイルを「solid」、太さ5px、カラーコード「#5cb7ff」で指定している例です。

.element4 {
  outline-style: solid;
  outline-width: 5px;
  outline-color: #5cb7ff;
}

<p class="element4"></p>

アウトラインのスタイルを「double」、太さ5px、カラーコード「#5cb7ff」で指定している例です。

.element5 {
  outline-style: double;
  outline-width: 5px;
  outline-color: #5cb7ff;
}

<p class="element5"></p>

アウトラインのスタイルを「groove」、太さ5px、カラーコード「#5cb7ff」で指定している例です。

.element6 {
  outline-style: groove;
  outline-width: 5px;
  outline-color: #5cb7ff;
}

<p class="element6"></p>

アウトラインのスタイルを「ridge」、太さ5px、カラーコード「#5cb7ff」で指定している例です。

.element7 {
  outline-style: ridge;
  outline-width: 5px;
  outline-color: #5cb7ff;
}

<p class="element7"></p>

アウトラインのスタイルを「inset」、太さ5px、カラーコード「#5cb7ff」で指定している例です。

.element8 {
  outline-style: inset;
  outline-width: 5px;
  outline-color: #5cb7ff;
}

<p class="element8"></p>

アウトラインのスタイルを「outset」、太さ5px、カラーコード「#5cb7ff」で指定している例です。

.element9 {
  outline-style: outset;
  outline-width: 5px;
  outline-color: #5cb7ff;
}

<p class="element1"></p>