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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5
完全対応 1.5
未対応 1 — 3.6
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 8Opera 完全対応 7Safari 完全対応 1.2WebView Android 完全対応 2Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 46Opera Android 完全対応 12Safari iOS 完全対応 3.2Samsung Internet Android ?
autoChrome ? Edge 未対応 なしFirefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

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

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

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