輪郭線と境界線の違い

要素の枠と言えば真っ先に思い浮かぶのは、borderプロパティだと思います。

ですが、実は要素に枠線を表示させるCSSプロパティはもう１つあって、それがoutlineプロパティです。
どちらも要素の外側に枠線をつけるという意味ではほとんど変わりませんが、borderで表示される線は境界線、outlineで表示される線は輪郭線と呼ばれています。

では、境界線と輪郭線はどう違うのでしょうか？試しに、borderプロパティで枠線を表示したものと、outlineプロパティで枠線を表示したものを並べてみましょう。

＊borderで枠線を表示＊

＊outlineで枠線を表示＊

…見事なまでに同じ表示結果ですね。ただ、borderプロパティとoutlineプロパティは、正真正銘まったく別のCSSプロパティです。

その証拠に、この２つのプロパティには以下のような大きな違いがあります。

具体例を見ていきましょう。borderプロパティならば以下のような表示が可能ですが…

＊borderで枠線を一部表示＊

outlineプロパティでは四辺全ての枠線が表示されます。

＊outlineで枠線を表示（枠の色やスタイルは変更できます）＊

このように、普段使いならば圧倒的にborderプロパティの方が使いやすく、カスタマイズの自由度が高いです。
「だったら何のためにoutlineプロパティは存在しているの？」と思うかもしれませんが、全く別のプロパティだからこそ、共存（同時に表示）させることが可能になっています。（下のサンプルを参照）

＊borderとoutlineで枠線を表示＊

ちょっと応用的なテクニックですし、そんなに頻繁に使う機会があるわけではないですが、覚えておくとCSSによるデザインの幅が広がるのは間違いありません。

POINT!
1. ・枠線の表示には境界線（border）と輪郭線（outline）がある！
2. ・borderでは枠線の一部表示や角を丸めることが可能だが、outlineではそれができない！
3. ・borderとoutlineは異なるCSSプロパティなので、同時に表示させることも可能！

outlineプロパティの値

outlineプロパティは、borderプロパティと同じく、枠線のスタイル（outline-style）・枠線の色（outline-color）・枠線の太さ（outline-width）を一括できるプロパティであり、値もこの３種ということになります。

＊outlineの値＊

borderプロパティの設定と同じく、それぞれに対応する値の間を半角スペースで区切って記述します。
,（カンマ）で区切るわけではないので注意してください。
例）p { outline: solid red 10px; }

下に、outlineプロパティの値を任意で変更できるサンプルを用意したので、表示の違いを確認してみてください。

基本的には、outlineの値は、borderの指定と全く同じと思って大丈夫です。outline-topとか、outline-radiusなんていうプロパティはありませんが、四辺を全て一括表示する場合の値において言えば、違いは特にありません。

また、borderプロパティもそうなのですが、outline-colorやoutline-widthに該当する値がしっかり設定されていても、outline-styleに該当する値が未指定だと枠線は表示されません。
outline-styleに関しては初期値が「none」なので、指定が必須となっています。（outline-colorとoutline-styleは未指定でも枠線は表示されます）

POINT!
1. ・outlineプロパティの値は、枠線のスタイル、色、太さの３種類！
2. ・値の指定の仕方は、基本的にborderプロパティと同じ！
3. ・outline-styleに該当する値は指定が必須！（初期値が非表示の「none」であるため）

フォームの枠線をカスタム

多くのWebサイトに設置されているお問い合わせフォームですが、主要なブラウザでは、フォーカスするとデフォルトで枠線が表示される設定になっています。

用語解説：フォーカス（focus）

百聞は一見にしかずということで、まずは下のフォームをクリック（タップ）してみてください。外側に枠線が表示されます。

こういったフォームをクリックすると現れる枠線ですが、これはborderではなくoutlineプロパティによる枠線の出現です。
なので、フォーカス時の枠線をカスタマイズしたいなら、borderではなくoutlineプロパティを設定する必要があります。

たとえば、フォーカス時の枠線を非表示にしたい場合は、フォームをセレクタに指定した上で、{ outline: none !important; }と指定すればOKです。
フォーカスが外れている（選択されていない状態）の時の枠線は、outlineではなくborderですし、フォーカスされた時もborderの線が消えるわけではないので、outlineをnone（非表示）に固定しても枠線が全て消えてしまうことはありません。
下のサンプルは、outline: none;でフォーカス時の枠線を消したものです。

また、フォーカス時の枠線の色を変えたい場合は、対象に{ outline-color: red !important; }と設定することで、実装できます。（下のサンプルをクリックしてみてください。）
※ブラウザやデバイスによっては、{ outline: solid red; }というふうに、outline-styleも併せて設定しないと効かない場合があります。

同じ要領で、フォーカス時の枠線のスタイルを変更したい場合は、対象にoutline-styleを設定すればOKです。…と言いたいところですが、outline-styleは設定した時点で枠線が表示されてしまいます。

そのため、少し面倒臭いですがちゃんと擬似クラスの:focusでセレクタを指定を行い、CSS調整を行う必要があります。

	<input type="text" class="sample_outline_focus">    

	.sample_outline_focus:focus {
	  outline-style: dashed;
	}

用語解説：擬似クラスとは？

フォーカス時の挙動はブラウザによって異なるので、カスタマイズをし過ぎると想定しないような表示になることもあり得るので注意が必要ですが、フォーカス時の強制枠線表示を消す程度であればリスクは少ないですし、割とよく使うテクニックかと思います。

POINT!
1. ・フォームがフォーカスされた時に現れる枠線は、borderではなくoutline！
2. ・outlineプロパティを指定することで、フォームがフォーカスされた時の枠線をカスタムできる！
3. ・outline-styleをカスタムしたい場合は、擬似クラスの:focusを使うべし！

便利なoutline-offset

borderとoutlineでは、borderの方がカスタマイズの自由度が高くて使いやすいのですが、outlineプロパティにしかない強みもあります。
それが、outline-offsetプロパティの存在です。

要素と境界線(border)の間隔を広げるには、paddingプロパティを適用させればよいですが、逆に言うとborderの場合はpaddingを使うしか選択肢がありません。

一方、outlineプロパティであればpaddingだけでなく、outline-offsetプロパティで間隔を広げることが可能なのです。

要素の内側の余白を広げずに枠線と要素の間隔を広げられるので、極端な例ですが、レイアウトを崩すことなく枠線と他の要素を被らせることも可能です。

また、borderと合わせて、種類や色の異なる二重線を作ることもできます。

内側がborderの線、外側がoutlineの線。

	<p>内側がborderの線、外側がoutlineの線。</p>    

	p {
	    width: fit-content;
	    margin: 2rem auto;
	    border: solid darkblue;
	    padding: 20px;
	    outline: dotted darkorange;
	    outline-offset: 10px;
	}

また、輪郭線（outline）と境界線（border）の間の空間の色は、透明です。
輪郭線を指定した要素と同じ背景色になるのではなく、輪郭線を指定した親要素と同じ背景になるので、背景色を変えたい場合は少し注意が必要です。

また、outline-offsetの値は、pxやremなど数値＋単位を使った一般的な距離の指定方法になりますが、%（パーセント）は使用できないので、paddingと全く同じようには指定できません。

POINT!
1. ・outlineはoutline-offsetプロパティで、要素との間隔を空けられる！
2. ・要素の内側の余白（padding）を広げるわけではないので、間隔を空けてもレイアウトが崩れない！
3. ・境界線（border）と組み合わせて、種類や色が異なる二重線にすることも可能！