枠線は要素に様々な枠線を描画するスタイル。
上下左右に異なる値（色・太さ・枠のスタイル）を設定できる。
枠線の種類は直線・破線・点線の 3 種類と、装飾系の 5 種類がある。
また、例外的ではあるが三角形を作ることもできる。
アウトラインは枠線とほぼ同じだが、枠線を含む要素の外側に枠線を描画する。
枠線とアウトラインを同時に指定することもできる。
枠線は汎用性が高いため、頻繁に使用される。画像に枠線を描き込まずに CSS で枠線を付ければ、後から色や太さを変更できるからだ。
デモ
枠線
三角形
アウトライン
注意
- 破線と点線の間隔は変更できない。
- 装飾系の枠線がすべての端末で同じように描画されるかどうかは怪しい。
応用例
See the Pen The outline-offset property by SitePoint (@SitePoint) on CodePen.