CSS) border vs outline

스쉐덴 참새.  Unsplash 에 Nikola Johnny Mirkovic 님이 올림.

들어가는 말

input을 디자인해 본 분들은 알 겁니다. 테두리를 꾸밀 때는 outline을 건드려야 한다는 것을요. outline과 border는 어떤 차이가 있길래 그런 걸까요?

정답

답은 의외로 간단합니다. MDN에 정확하게 나와 있어요.

Outline is a line outside of the element's border. Unlike other areas of the box, outlines don't take up space, so they don't affect the layout of the document in any way.

 

MDN의 border 문서에도 적혀 있습니다.

Outlines never take up space, as they are drawn outside of an element's content.
According to the spec, outlines don't have to be rectangular, although they usually are.

 

요약하면 border의 바깥쪽이 outline입니다. 또 재밌는 특징으로는 outline은 css의 box model 외적인 존재이기 때문에 어떤 공간도 차지하지 않는다는 것입니다. 말 그대로 out의 line인 셈이죠.

 

CodeSandbox의 예시를 간단하게 준비했습니다. outline은 두꺼워져도 괜찮지만, border는 두꺼워지면 본인의 크기가 늘어나면서 아래 글자도 밀어냅니다. 따라서 border의 두께를 변환해야 하는 경우에는 다른 ui의 밀림 현상이 있어도 되는지 고민하고, outline의 사용도 고려하면 좋을 것 같네요.

 

특이사항

구 버전의 사파리에서는 border-radius를 적용하더라도 outline에는 반영되지 않는 버그가 있습니다. 이 문제는 2022년 7월 webkit release note에서 해결하였고, 2023년 3월에 사파리 16.4에 적용된 것 같네요. 만약 ios 지원을 염두에 두고 있다면 이 점 역시 확인하면 좋을 듯 합니다.

참고자료

MDN: outline
MDN: border
Webkit: Release Notes for Safari Technology Preview 157
Apple Developer: Safari 16.4 Release Notes
W3C Recommendation: CSS Basic User Interface Module Level 3