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