outline-style

概要

CSS の outline-style プロパティは、要素のアウトラインのスタイルを設定します。アウトラインとは、要素を囲むようにボーダー境界の外側に描かれる線で、要素を目立たせます。

たいていの場合、outline-style、outline-width、outline-color の代わりに簡略化プロパティ outline を使ったほうが便利です。

構文

形式文法: auto | <br-style>
where 
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

outline-style: none
outline-style: dotted
outline-style: dashed
outline-style: solid
outline-style: double
outline-style: groove
outline-style: ridge
outline-style: inset
outline-style: outset

outline-style: inherit

値

<br-style> は次のうちのいずれかです:

none

アウトラインを描きません（outline-width は 0 です）

dotted

丸い連続した点のアウトラインです

dashed

隙間の広い、破線のアウトラインです

solid

一本線のアウトラインです

double

二重線のアウトラインです。outline-width は二本の線とその間のスペースの合計になります

groove

キャンバスに掘られたように見えるアウトラインです

ridge

groove の逆方向で、キャンバスから飛び出たように見えるアウトラインです

inset

キャンバスに埋め込まれたように見える
アウトラインです

outset

inset の逆方向で、キャンバスから飛び出たように見えるアウトラインです

例

.example {  /* make the outline a 3D groove style */
   outline-style: groove;        /* same result as "outline: groove" */ 
}

仕様

ブラウザ実装状況

[*] Gecko 1.8 (Firefox 1.5) 以前では、Mozilla CSS Extension の -moz-outline-style を使ってこの効果を作れます