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 | <br-style>

where
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

例 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 に値が見つかりません!
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応112

1.5

1 — 3.6 -moz-

871.2
auto ? なし ? ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応2.1 ? あり46123.2 ?
auto ? ? なし ? ? ? ?

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

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