CSSで枠線を内側に引きたい場合、方法は1つじゃありません。 いくつかやり方を考えてみると次の3つが使えます。 box-sizingプロパティを使った方法 outline-offsetプロパティを使った方法 after疑似要素を使った方法 どれを使っても内側に枠線を引くことができますが、微妙に動作とかが違います。 そこで記憶の整理も兼ねてこれらのやり方とコード例についてまとめてみました。 1. box-sizingプロパティを使った方法 box-sizing とはボックス(要素)サイズの算出方法を指定するためのプロパティ この値に border-box を指定することでボーダーを要素サイズに含めることが可能です。 なのでそれを応用すれば内側に枠線を引けます。 そのやり方は次のコード例の通り
![【CSS】枠線を要素内側に引くための3つの方法 | PisukeCode - Web開発まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf0d1617f4fff9fd509ea5020e03db78dc589a68/height=288;version=1;width=512/https%3A%2F%2Fpisuke-code.com%2Fwp-content%2Fuploads%2F2018%2F08%2Fcss.png)