borderの幅を変えた時に全体幅ごと変わってしまう問題

input要素などに対してフォーカス時にborderの幅を変えたいとき、
通常だとborderの幅は全体の幅に含まれないため、borderの幅が増えた分、
要素自体の幅も大きくなってガタガタしてしまう。

これを解決するプロパティとして、

 box-sizing

というものがある。

 box-sizing: border-box;

というプロパティを追加することで、borderの幅も全体の幅に含めて考慮してくれるので、
上記の問題は解消される。