Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

outline-style

概要

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

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

初期値none
適用対象全要素
継承不可
メディアvisual, interactive
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

形式文法: 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" */ 
}

仕様

仕様書 策定状況 コメント
CSS Basic User Interface Module Level 3
The definition of 'outline-style' in that specification.
勧告候補 変更なし
CSS Level 2 (Revision 1)
The definition of 'outline-style' in that specification.
勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート  1.0 1.5 (1.8) [*] 8.0 7.0 1.2 (125)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

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

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: fscholz, Sebastianz, ethertank, sosleepy
 最終更新者: fscholz,