“outline-style”プロパティ:輪郭線の見た目

概要

“outline-style”プロパティは要素の輪郭線の見た目を指定するプロパティです。

サンプルコード

値

値	説明
“<line-style>”値
none	輪郭線を表示せず、輪郭線の太さや色の指定は無視されます (“outline-collapse: collapse;”の場合に重なる輪郭線があればその輪郭線が表示されます。)
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	溝のように見える線
ridge	出っ張りのように見える線
inset	輪郭線の中身が沈み込んでいるように見える線 (“outline-collapse: collapse;”の場合は“ridge”とみなされます。)
outset	輪郭線の中身が出っ張っているように見える線 (“outline-collapse: collapse;”の場合は“groove”とみなされます。)
他の値
auto	自動 (ユーザー・エージェント独自のスタイルで輪郭線を描画することを許可します。“outline-color”プロパティと“outline-width”プロパティをどのように扱うかもユーザー・エージェントに任されます。ユーザー・エージェントによっては“solid”として扱います。)
共通キーワード

仕様書

定義されている仕様書

outline-style

none
dotted
dashed
solid
double
groove
ridge
inset
outset
auto

輪郭線の見た目を指定する

div {

outline-style: none;
outline-color: rgb(168,214,105); /*■*/

}

outline-style: none;

div {

outline-style: dotted;
outline-width: 5px;
outline-color: rgb(168,214,105); /*■*/

}

outline-style: dotted;

div {

outline-style: dashed;
outline-width: 5px;
outline-color: rgb(168,214,105); /*■*/

}

outline-style: dashed;

div {

outline-style: solid;
outline-width: 5px;
outline-color: rgb(168,214,105); /*■*/

}

outline-style: solid;

div {

outline-style: double;
outline-width: 5px;
outline-color: rgb(168,214,105); /*■*/

}

outline-style: double;

div {

outline-style: groove;
outline-width: 5px;
outline-color: rgb(168,214,105); /*■*/

}

outline-style: groove;

div {

outline-style: ridge;
outline-width: 5px;
outline-color: rgb(168,214,105); /*■*/

}

outline-style: ridge;

div {

outline-style: inset;
outline-width: 5px;
outline-color: rgb(168,214,105); /*■*/

}

outline-style: inset;

div {

outline-style: outset;
outline-width: 5px;
outline-color: rgb(168,214,105); /*■*/

}

outline-style: outset;

ブラウザ独自のスタイルで輪郭線を描画する

div {

outline-style: auto;
outline-width: 5px;
outline-color: rgb(168,214,105); /*■*/

}

outline-style: auto;