We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

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

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

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

構文

形式文法: 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
outline-style の定義
勧告案 変更なし
CSS Level 2 (Revision 1)
outline-style の定義
勧告  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,