[CSS] border vs outline, 그리고 box-sizing

아직 작성중인 글입니다.

얼마 전, border, outline, box-shadow를 이용한 테두리 그리는 유튜브 영상을 보았습니다. 각각 어떤 특징을 가지고 있고, 어떻게 사용하면 좋을까요? 사용 시에는 어떤 점에 유의하면서 사용해야 할까요?

https://www.figma.com/dev-mode/

border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다. - 출처: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing 중 발췌

box-sizing: border-box;

border까지 width, height 수치에 포함하는 값이 됩니다.

box-sizing: content-box;

border는 width와 height에서 제외됩니다.이 때 주의할 점은 border까지 포함된 실제 박스크기가 width, height보다 커질 것이고, 이러면 다른 요소들과의 레이아웃이 미묘하게 어긋날 수 있습니다.

https://www.reddit.com/r/FigmaDesign/comments/kv533r/why_default_resolutions_in_figma_are_so_weird/