「CSSで枠線をつけるといえばborder!」ではありますが、borderだと思い通りのスタイルにならないこともしばしば。。
そこで、私が用途に合わせて使い分けている、枠線の付け方を紹介します。
枠線を表現できるプロパティ3つ
border
枠線といえば、一番に上がってくるのがborderです。
使い方はこんな感じ。
/* solidスタイル、10pxの太さ、orange色のボーダー */
.border-style {
border: solid 10px orange;
}
※border詳細:MDN
box-shadow
影をつけるプロパティとして有名なbox-shadowですが、実は枠線も表現できます。
サンプルコードの通り、X軸・Y軸のオフセットを0、ぼかしなしにして、拡散する半径だけ指定します。
/* 指定要素の外側に、10pxの太さ、orange色のボーダー */
.border-style {
box-shadow: 0px 0px 0px 10px orange;
}
※box-shadow詳細:MDN
outline
名前の通り、アウトラインを設定できます。
アウトラインなので、要素の内側につけることはできません。
/* solidスタイル、10pxの太さ、orange色のアウトライン(≒ボーダー) */
.border-style {
outline: solid 10px orange;
}
※outline詳細:MDN
挙動の違い
内側に線をつける
border
borderには外側・内側という概念はありません。
そこで、どのようにして内側・外側を操作するかというと、「box-sizing」というプロパティを用います。
下の画像を見てください。
どちらも同じ幅・高さを指定していますが、大きさが違いますよね・・・?

実は、左のbox-sizing: 'content-box';
では、borderの幅はwidth, heightに含まれません。
そのため、widthを例に取ると「width: 300px + 右borderの幅 + 左borderの幅」の幅になっています。
一方、右のbox-sizing: 'border-box';
では、borderの幅も含めてwidth, heightが計算されます。
box-shadow
box-shadowを内側に設定したい場合、insetを追加すればOKです。
.border-style {
box-shadow: inset 0px 0px 0px 10px orange;
}
outline
残念ながらアウトラインは「アウトライン」なので、内側には対応していません。。
途中でborderの幅・高さが変わるとき
ホバーやフォーカスした時に、borderの幅を大きくする対応とかたまにありませんか?
そして内容によっては想定外の動きをする場合があります。
試しにデモを用意したので見てみてください。

左のborderの悲しみは伝わりますでしょうか?(右のoutlineは仕方ない)
borderの幅が変わることによって、中のコンテンツの幅・高さが変わります。
子要素の表示に影響があることも、、、!
もちろん、
- 子要素にwidth, heightを指定する
- box-sizingをcontent-boxに変更する
など回避策もありますが、実現したい実装に適さない場合もあります。
そんな時のために、デモ中央のbox-shadowを使った実装がおすすめです。
参考までにデモのコード載せておきます。
HTML
<div className='container'>
<div>
<p>border (box-sizing: border-box;)</p>
<div class='border'>
<img src='/example.png'/>
</div>
</div>
<div>
<p>box-shadow (inset)</p>
<div class='box-shadow'>
<img src='/example.png'/>
</div>
</div>
<div>
<p>outline</p>
<div class='outline'>
<img src='/example.png'/>
</div>
</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
gap: 40px;
padding: 40px;
}
.border, .box-shadow, .outline {
width: 300px;
height: 200px;
box-sizing: border-box;
background-color: skyblue;
text-align: center;
}
.border img, .box-shadow img, .outline img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
}
.border {
border: 10px solid orange;
}
.border:hover {
border: 20px solid orange;
}
.box-shadow {
box-shadow: inset 0px 0px 0px 10px orange;
}
.box-shadow:hover {
box-shadow: inset 0px 0px 0px 20px orange;
}
.outline {
outline: solid 10px orange;
}
.outline:hover {
outline: solid 20px orange;
}
まとめ
3つの枠線の表現方法を紹介しました。
基本的には、borderもしくはoutlineを使用するのがいいかと思います。
box-shadowは本来は影をつけるためのものなので、border, outlineでは難しい場合に使うことをお勧めします。