CSSアウトラインスタイルのプロパティ

例

アウトラインのスタイルを設定します。

div {outline-style: dotted;}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

アウトラインとは、要素を「目立たせる」ために、境界線の外側の要素の周りに描かれる線です。

outline-styleプロパティは、アウトラインのスタイルを指定します。

デフォルト値：	なし
遺伝性の：	いいえ
アニメート可能：	番号。アニメート可能について読む
バージョン：	CSS2
JavaScript構文：	オブジェクト.style.outlineStyle = "dashed"

ヒントと注意

注：アウトラインは境界線とは異なります！境界線とは異なり、アウトラインは要素の境界線の外側に描画され、他のコンテンツと重なる場合があります。また、アウトラインは要素の寸法の一部ではありません。要素の合計の幅と高さは、アウトラインの幅の影響を受けません。

ブラウザのサポート

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

Property
outline-style	1.0	8.0	1.5	1.2	7.0

CSS構文

プロパティ値

Value	Description	Play it
none	Specifies no outline. This is default
hidden	Specifies a hidden outline
dotted	Specifies a dotted outline
dashed	Specifies a dashed outline
solid	Specifies a solid outline
double	Specifies a double outliner
groove	Specifies a 3D grooved outline. The effect depends on the outline-color value
ridge	Specifies a 3D ridged outline. The effect depends on the outline-color value
inset	Specifies a 3D inset outline. The effect depends on the outline-color value
outset	Specifies a 3D outset outline. The effect depends on the outline-color value
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

その他の例

例

破線のアウトライン：

div {outline-style: dashed;}

例

しっかりとしたアウトライン：

div {outline-style: solid;}

例

二重のアウトライン：

div {outline-style: double;}

例

溝の輪郭：

div {
    outline-style: groove;
    outline-color: coral;
    outline-width: 7px;
}

例

尾根の輪郭：

div {
    outline-style: ridge;
    outline-color: coral;
    outline-width: 7px;
}

例

挿入図：

div {
    outline-style: inset;
    outline-color: coral;
    outline-width: 7px;
}

例

最初の概要：

div {
    outline-style: outset;
    outline-color: coral;
    outline-width: 7px;
}

例

さまざまな値を使用して、アウトラインのスタイルを設定します。

p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}

CSSリファレンス

CSS Properties