mimonelu

枠線とアウトライン

枠線は要素に様々な枠線を描画するスタイル。
上下左右に異なる値(色・太さ・枠のスタイル)を設定できる。

枠線の種類は直線・破線・点線の 3 種類と、装飾系の 5 種類がある。
また、例外的ではあるが三角形を作ることもできる。

アウトラインは枠線とほぼ同じだが、枠線を含む要素の外側に枠線を描画する。
枠線とアウトラインを同時に指定することもできる。

枠線は汎用性が高いため、頻繁に使用される。画像に枠線を描き込まずに CSS で枠線を付ければ、後から色や太さを変更できるからだ。

デモ

枠線

三角形

アウトライン

注意

応用例

See the Pen The outline-offset property by SitePoint (@SitePoint) on CodePen.