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.
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: 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
<div>
<p class="auto">Outline デモ</p>
</div>
CSS
.auto {
outline-style: auto; /* "outline: auto" と同じ */
}
/* デモを見やすく */
* {
outline-width: 10px;
padding: 15px;
}
結果
輪郭線を dashed と dotted に設定
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;
}
結果
輪郭線のスタイルを 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;
}
結果
輪郭線のスタイルを 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;
}
結果
輪郭線のスタイルを 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;
}
結果
仕様書
Specification |
---|
CSS Basic User Interface Module Level 4 # outline-style |
ブラウザーの互換性
BCD tables only load in the browser