outline-style

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

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ 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-width は 0 です。

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 - dotted と dashed

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 - solid と double

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 - groove と ridge

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 - inset と outset

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; }

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。