アウトライン(輪郭線)のスタイルを指定する

CSS - outline-style

概要

CSSプロパティ「outline-style」は、アウトライン(輪郭線)のスタイルを指定することができます。ショートハンドで記述する方法は outline プロパティを使います。

<p class="solid">solidを指定します</p>
<p class="dotted">dottedを指定します</p>
<style>
p {
  outline-color: orange;
  outline-width: 5px;
}
.solid { outline-style: solid; }
.dotted { outline-style: dotted; }
</style>

このプロパティには様々なアウトライン装飾が用意されており、以下一覧です。

説明
noneアウトラインは表示されません
solid一本線のアウトラインが表示されます
dotted1列にならんだドット模様のアウトラインが表示されます
dashed破線のアウトラインが表示されます
double二本線のアウトラインが表示されます
groove立体的で窪んだ線が表示されます
ridge 立体的で隆起した線が表示されます
insetgrooveと似てますが立体的で窪んだ線が表示されます
outsetridgeと似てますが、立体的で隆起した線が表示されます

使用例

実際のスタイルがこちらになります。

<p class="solid">solidを指定します</p>
<p class="dotted">dottedを指定します</p>
<p class="dashed">dashedを指定します</p>
<p class="double">doubleを指定します</p>
<p class="groove">grooveを指定します</p>
<p class="ridge">ridgeを指定します</p>
<p class="inset">insetを指定します</p>
<p class="outset">outsetを指定します</p>
<style>
p {
  outline-color: orange;
  outline-width: 5px;
}
.solid { outline-style: solid; }
.dotted { outline-style: dotted; }
.dashed { outline-style: dashed; }
.double { outline-style: double; }
.groove { outline-style: groove; }
.ridge { outline-style: ridge; }
.inset { outline-style: inset; }
.outset { outline-style: outset; }
</style>

仕様書

関連CSSプロパティ