[CSS] border-width가 변경될 때 레이아웃이 틀어지는 이슈

border-width 가 변경될 때 레이아웃이 틀어지는 이슈가 있는데, 이를 해결하기 위해서 box-shadow 를 사용해서 border-width 가 늘어나는 것 처럼 보이게 하는 방법이 있습니다. 다른 방법도 있지만, 아래와 같은 이슈가 있어 사용을 권장하지 않습니다.

• outline 은 Safari에서 border-radius 가 적용되지 않고, 애니메이션 성능이 좋지 못하다는 이슈가 있습니다.
• pseudo-element 는 input 과 img 에서 적용되지 않으며, 다른 방법들에 비해서 코드량이 많다는 이슈가 있습니다.

See the Pen border-width Change Animation by FE4902 (@fe4902) on CodePen.