css border를 안쪽으로 주고싶을 때

백그라운드 컬러가 있는 버튼을 :호버하면

백그라운드 컬러가 사라지고, 테두리가 생기는 버튼을 만들고자 했다.

구현하고 확인하니, 호버하면 버튼의 사이즈가 자꾸 변경됐다(커졌다).

---

이유는?

border가 outline으로 생기기 때문에 1~2px정도 커지는 것이다!

그래서 box-sizing: border-box; 를 사용했지만

결국엔 테두리가 outline으로 그려지기 때문에 똑같았다.

---

해결방법은?

box-shadow를 사용하면 된다

<style>
box-shadow: "0 0 0 1px red";
</style>

그림자 조절 속성을 모두 0으로 맞추고 테두리 크기를 설정해주면
border를 안쪽으로 그리는 것과 동일하게 보인다.

인라인 보더 기능이 생겼으면 좋겠다.
이건 뭔가 야매느낌?