[CSS] 보더와 아웃라인의 차이

1. 보더(border)의 기본 기능

padding과 margin 사이에 생성되는 border도 마찬가지로 방향 지정이 가능하며, border 네이밍 단독으로 쓰이든 방향과 함께 네이밍 되어 쓰이든 width→style→color 순으로 각각의 해당하는 값들을 지정 할 수 있습니다.

마찬가지로 border-width와 border-color 속성은 margin과 padding과 마찬가지로 값의 개수에 따라 적용 되는 방향을 달리 적용할 수 있습니다. 하지만 이렇게 border에 하나의 속성 이름이 네이밍 되는 경우 나머지 두 가지 속성을 마저 작성 해주어야 하기 때문에 이 방법은 권장 되지 않습니다.

이러한 border는 크기, 방향, 스타일, 색상 뿐만 아니라 radius 속성으로 해당 외곽선의 둥근 정도를 표현 가능한데, 50px 혹은 50% 이상부터는 해당 태그의 박스를 완전히 둥근 형태로 변화 시킬 수 있습니다.

2. Border vs Outline

보더의 특징과 유사한 속성에는 Outline이라는 속성이 있는데요. 이 속성의 경우 border와는 별개로 컨텐츠 박스의 외곽을 시각적으로 표시하는 용도로 사용되며, border가 있든 없든, box-sizing이 contetn이든 border이든 border 바로 위에 생성이 되기 때문에

보더와는 별개로 외곽선을 생성하고 싶을때 사용됩니다. 물론 아웃라인도 보더와 같이 동일하게 속성을 지정하여 사용하면 됩니다.