CSS Inner Border：ボックスの内側に枠線を描く

今回、個人のポータルページをデザインしていたときに、内側の枠線（Inner Border）の効果を作りたくなり、とても賢いやり方を学びました。CSS で内側の枠線を作ると聞くと、まず padding や margin でボックスを大きくすることを思いつくと思います。しかし、それではうまくいきません。ボックスを広げると枠線も一緒に動いてしまうため、この方法では内側の枠線のスタイルを作れないのです。

ネットで見つけた解決策は、まず元の位置に border を描き、次に box-shadow を使って、ボックスの外側にボックスの背景と同じ色の「影」を描くというものです。この影にはオフセットがないので、内側に枠線があるように見える錯覚が生まれるのです！

上の画像を例にすると、box-shadow でボックスの外側に 5px の白い影を描いています。オフセットがないため、この影はボックスの一部のように見えます。参考までに CSS は次のとおりです。

.box {
  background: white;
  border: red 1px solid;
  box-shadow: 0 0 0 5px white;
}