HTML & CSS

outlineプロパティ

  1. 最終更新日:
  2. 公開日:

outlineプロパティは要素のアウトライン(境界線)に関するoutline-styleプロパティoutline-widthプロパティoutline-colorプロパティの3つを一括指定するプロパティです。

  • 初期値

    各プロパティに準ずる

  • 継承

    不可

  • 適用できる要素

    全要素

outlineプロパティに指定できる値

指定できる値は各プロパティを参照してください。
なお、こちらのプロパティではoutline-offsetプロパティについては値を指定することはできません。

プロパティ指定する内容
outline-styleプロパティアウトラインのスタイル(見た目)。
outline-widthプロパティアウトラインの太さ
outline-colorプロパティアウトラインの色

アウトラインは指定した要素の外側に線を敷くため、ボーダーよりも外側に表示されます。
親要素のmarginプロパティpaddingプロパティの領域に重なる点に注意してください。

アウトラインの表示領域

また、outlineプロパティは上下左右の4辺全てに一括指定することしかできないため、borderプロパティのように特定の辺だけ指定するといったことはできません。

使用例

アウトラインの色、太さ、スタイルを一括指定している例です。

CSS コード例

.element1 {
  outline: 5px solid #006ac3;
}

HTML コード例

<p class="element1"></p>
3つのプロパティを一括指定した例

記事一覧