【CSS】枠線の付け方3つ（内側も含む）

「CSSで枠線をつけるといえばborder！」ではありますが、borderだと思い通りのスタイルにならないこともしばしば。。
そこで、私が用途に合わせて使い分けている、枠線の付け方を紹介します。

枠線を表現できるプロパティ3つ
挙動の違い
1. 内側に線をつける
2. 途中で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;
}