CSS の outline-style プロパティは、要素の輪郭線のスタイルを設定します。輪郭線とは要素の周りに描かれる線のことで、 border よりも外側です。

たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ outline を使ったほうが便利です。

構文

/* キーワード値 */
outline-style: auto;
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;
outline-style: initial;
outline-style: unset;

outline-style プロパティは、以下に挙げた値のうちの一つで指定します。

auto

ユーザーエージェントに輪郭線の描画を任せます。

none

輪郭線を描きません。outline-width0 です。

dotted

点線の輪郭線です。

dashed

破線の輪郭線です。

solid

1本の実線の輪郭線です。

double

2本の実線の輪郭線です。outline-widthは2本の線とその隙間の合計です。

groove

ページに刻まれたかのように見える輪郭線です。

ridge

grooveの逆で、ページから押し出されたように見える輪郭線です。

inset

領域がページに埋め込まれたかのように見える輪郭線です。

outset

insetの逆で、領域がページから隆起しているように見える輪郭線です。

形式文法

auto | <'border-style'>

例 0 - auto

autoは、輪郭線スタイルがカスタムであることを表します。 — 典型的には、プラットフォーム用のユーザーインターフェースのデフォルトのスタイル、または、CSSで詳細に記述できるスタイルよりも表現豊かなスタイル(例:輝いて見える半透明の外郭を持つ、輪郭の丸い輪郭線)

HTML

<div>
  <p class="auto">Outline Demo</p>
</div> 

CSS

.auto {
  outline-style: auto; /* "outline: auto" と同じ */
}

/* デモを見やすく */ 
* { outline-width: 10px; padding: 15px; } 

例 1 - dotteddashed

HTML

<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div> 

CSS

.dotted {
  outline-style: dotted; /* "outline: dotted" と同じ */
}
.dashed {
  outline-style: dashed;
}

/* デモを見やすく */ 
* { outline-width: 10px; padding: 15px; } 

例 2 - soliddouble

HTML

<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div> 

CSS

.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/* デモを見やすく */ 
* { outline-width: 10px; padding: 15px; } 

例 3 - grooveridge

HTML

<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>

CSS

.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/* デモを見やすく */ 
* { outline-width: 10px; padding: 15px; }

例 4 - insetoutset

HTML

<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>

CSS

.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/* デモを見やすく */ 
* { outline-width: 10px; padding: 15px; }

仕様書

仕様書 状態 備考
CSS Basic User Interface Module Level 3
outline-style の定義
勧告 auto値を追加。
CSS Level 2 (Revision 1)
outline-style の定義
勧告 初回定義
初期値none
適用対象すべての要素
継承なし
メディア一括指定の各プロパティとして
  • visual: DB に値が見つかりません!
  • interactive: DB に値が見つかりません!
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
outline-styleChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5
完全対応 1.5
未対応 1 — 3.6
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 8Opera 完全対応 7Safari 完全対応 1.2WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
autoChrome 完全対応 1Edge 未対応 なしFirefox 完全対応 1.5IE 未対応 なしOpera 完全対応 ありSafari 完全対応 1.2WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

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

このページの貢献者: mdnwebdocs-bot, mfuji09, sutara79, fscholz, Sebastianz, ethertank, sosleepy
最終更新者: mdnwebdocs-bot,