[CSS] border와 outline의 차이

어떤 요소에 테두리 효과를 주기 위해서 일반적으로 border를 사용한다.

border는 실제로 그만큼의 공간을 차지하게 되어 레이아웃에 영향을 끼친다.

div:hover{
  border: 2px solid #e2012d;
}

2px만큼 테두리가 공간을 차지하여 높이가 달라지는 모습

 

 

반면 outline은 레이아웃에 영향을 끼치지 않는다.

div:hover{
  outline: 2px solid #e2012d;
  outline-offset: -2px;
}

outline을 사용하여 높이가 그대로 유지되는 모습

 

 

이렇게만 보면 outline이 더 좋아 보인다.

다만 outline은 border-top, border-right 처럼 특정 부분만 효과를 줄 수 없으며, border-radius 같은 효과도 쓸 수 없다.

상황에 따라 잘 선택해서 사용해야 한다.

 

 

 

border를 사용하고도 간단한 눈속임을 쓴다면 레이아웃을 유지한 채 테두리 효과를 줄 수 있다.

div{
  border: 2px solid transparent;
  border-radius: 15px;
}
div:hover{
  border: 2px solid #e2012d;
}

transparent로 높이가 그대로 유지되는 모습

 

기본적으로 투명한 2px의 테두리 효과가 적용되어 있고 마우스를 올리면 색깔만 바뀌는 것이다.