outline-style

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

仕様書

仕様書	状態	備考
CSS Basic User Interface Module Level 3 outline-style の定義	勧告	`auto`値を追加。
CSS Level 2 (Revision 1) outline-style の定義	勧告	初回定義

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

ブラウザーの対応

BCD tables only load in the browser