アウトラインプロパティ

プロパティoutlineは、外部枠線（スペースを取らない境界線）の色、種類、太さを全ての辺に対して同時に設定します。 しかし、borderとは異なり、この枠線は要素のサイズを拡張しません。 これは、outline-width、 outline-style、 outline-colorの一括指定プロパティです（ただし、 outline-offsetは含みません）。

構文

cssセレクタ {
  outline: 太さ 種類 色;
}

値の順序は重要ではありません。

例 . outlineのみ

html<div id="elem"></div>

css#elem {
  outline: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

例 . outlineプロパティとborderプロパティの併用

outlineによる枠線は外側に、borderによる枠線は内側に表示されます：

html<div id="elem"></div>

css#elem {
  outline: 4px solid green;
  border: 4px solid red;
  width: 300px;
  height: 100px;
}

Результат:

関連項目