[CSS] 요소의 테두리 너비 {border-width:}

border-width 속성은 요소 테두리의 너비 또는 두께를 설정하는 데 사용됩니다. 요소 테두리의 네 면 모두 또는 각 면에 대해 개별적으로 크기를 제어할 수 있습니다.

 

다음은 border-width 속성을 사용하는 방법의 예입니다.

div {
  border-width: 2px;
}

이 예에서 border-width 속성은 <div> 요소에 적용되며 2px 값은 테두리의 네 변 모두의 너비를 2픽셀로 설정합니다. 즉, <div> 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리의 너비는 모두 2픽셀입니다.

 

 

속기 표기법을 사용하여 각 측면에 대해 서로 다른 테두리 너비를 지정할 수도 있습니다.

div {
  border-width: 2px 4px 3px 1px;
}

이 경우 2px(위), 4px(오른쪽), 3px(아래), 1px(왼쪽) 값이 위에서부터 시계 방향으로 적용됩니다. 이것은 <div> 요소의 각 측면에 대해 서로 다른 테두리 너비를 설정합니다.

 

 

또는 각 측면에 대해 개별적으로 테두리 너비를 설정할 수 있습니다.

div {
  border-top-width: 2px;
  border-right-width: 4px;
  border-bottom-width: 3px;
  border-left-width: 1px;
}

이 예에서 <div> 요소 테두리의 각 면에는 서로 다른 너비가 지정됩니다.

 

 

border-width 속성은 픽셀(px), ems(em), rems(rem) 또는 백분율(%)과 같은 다양한 측정 단위를 허용합니다.

이러한 단위를 사용하여 요소의 크기 또는 기타 요소에 상대적인 테두리 너비를 정의할 수 있습니다.

 

 

각 측면에 개별적으로 다른 테두리 너비를 지정하려면 border-top-width, border-right-width, border-bottom-width 및 border-left-width 속성을 사용할 수 있습니다. 

 

 

border-width 속성을 사용하면 요소 테두리의 두께를 제어할 수 있으므로 모양을 사용자 지정하고 웹 페이지의 요소 또는 섹션 간에 시각적 구분을 만들 수 있습니다.