outline-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

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

試してみましょう

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

構文

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

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

auto

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

none

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

dotted

点線の輪郭線です。

dashed

破線の輪郭線です。

solid

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

double

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

groove

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

ridge

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

inset

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

outset

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

公式定義

初期値none
適用対象すべての要素
継承なし
計算値指定通り
アニメーションの種類計算値の型による

形式文法

outline-style = 
auto |
<outline-line-style>

輪郭線のスタイルを auto に設定

auto の値は、輪郭線のスタイルが独自のものであることを表します。仕様書によれば、「典型的には、プラットフォーム用のユーザーインターフェイスの既定のスタイル、または、CSS で詳細に記述できるスタイルよりも表現豊かなスタイル 、例えば、輝いて見える半透明の外郭を持つ、輪郭の丸い輪郭線」となっています。

HTML

html
<div>
  <p class="auto">Outline デモ</p>
</div>

CSS

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

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

結果

輪郭線を dashed と dotted に設定

HTML

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

CSS

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

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

結果

輪郭線のスタイルを solid と double に設定

HTML

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

CSS

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

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

結果

輪郭線のスタイルを groove と ridge に設定

HTML

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

CSS

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

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

結果

輪郭線のスタイルを inset と outset に設定

HTML

html
<div>
  <div class="inset">
    <p class="outset">Outline デモ</p>
  </div>
</div>

CSS

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

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

結果

仕様書

Specification
CSS Basic User Interface Module Level 4
# outline-style

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
outline-style
auto
dashed
dotted
double
groove
inset
none
outset
ridge
solid

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報