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-style は CSS のプロパティで、要素の輪郭線のスタイルを設定します。輪郭線とは要素の周りに描かれる線のことで、 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-width は 0 です。

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報