【outline-style】アウトラインの形式を指定

outline-styleプロパティでは、アウトラインの形式(スタイル)を指定することができます。

アウトラインとは要素の縁取り(輪郭線)のことで、ボタンや入力フィールドなどに輪郭線をつけて強調したい時などに、outline-styleやアウトラインに関するプロパティを使用する事で可能になります。

またボーダー(枠線)とアウトラインの違いですが、アウトラインはボーダーのすぐ外側の位置にボックスに重ねて表示されます。 このため、ボックスのサイズや配置に影響することがない他、常に矩形(すべての角が直角の長方形、四辺形)で表示されるわけではありません。

他にもoutline-topやoutline-bottomのような辺ごとに個別に指定できるプロパティはありませんので、注意して下さい。

なおアウトラインの形式以外も含めまとめて指定したい場合は、outlineプロパティを使用するとアウトラインの色・形式・幅を一括で設定することができます。

書式

  • outline-style : ……… アウトラインの形式(スタイル)を指定

★:solid、double、none、inherit、他下記参照

none
アウトラインを表示しません。太さも0となります。(初期値)
solid
実線(1本線)で表示します。
double
2本線(二重線)で表示します。
groove
へこんでみえるような立体的な感じで表示します。
ridge
浮き上がったようにみえる立体的な感じで表示します。
inset
アウトラインの上と左が暗く、下と右が明るい色で表示され、内側がへこんだように表示します。
outset
アウトラインの上と左が明るく、下と右が暗い色で表示され、内側が浮き上がったように表示します。
dashed
破線で表示します。
dotted
点線で表示します。

使用した時の例

.sample1 {outline-style: none;}
.sample2 {outline-style: solid;}
.sample3 {outline-style: double;}
.sample4 {outline-style: groove;}
.sample5 {outline-style: ridge;}
.sample6 {outline-style: inset;}
.sample7 {outline-style: outset;}
.sample8 {outline-style: dashed;}
.sample9 {outline-style: dotted;}

div {outline-color: #006699; outline-width:5px;}
<div class="sample1">none</div>
<div class="sample2">solid</div>
<div class="sample3">double</div>
<div class="sample4">groove</div>
<div class="sample5">ridge</div>
<div class="sample6">inset</div>
<div class="sample7">outset</div>
<div class="sample8">dashed</div>
<div class="sample9">dotted</div>

ブラウザ上の表示例

none
solid
double
groove
ridge
inset
outset
dashed
dotted

対応ブラウザなどのデータ

初期値 none 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer8~ , Google Chrome1~ , Firefox1.5~ , Opera7~ , Safari1.2~

関連情報