CSS의 border-width 속성은 HTML 요소 테두리의 두께를 지정하는 데 사용됩니다. 픽셀(px), 포인트(pt), em 등 다양한 길이 단위로 값을 설정할 수 있으며, thin(얇게), medium(보통), thick(굵게)과 같은 키워드 값도 활용할 수 있습니다.
border-width 사용 시 주의사항
border-width 속성을 적용하려면 반드시 border-style 속성을 함께 설정해야 합니다. 테두리 스타일의 기본값은 none이므로, 스타일을 지정하지 않으면 두께를 아무리 크게 설정해도 화면에 테두리가 표시되지 않습니다.
사용 가능한 값
길이 단위(px, pt, cm 등) 또는 thin, medium, thick 키워드를 사용할 수 있으며, 상하좌우 테두리마다 서로 다른 두께를 개별적으로 지정하는 것도 가능합니다.
예제
다음 코드를 실행하여 border-width 속성의 동작을 직접 확인해 보세요:
<html> <head> </head> <body> <p style = "border-width:3px; border-style:solid;"> 테두리 두께와 스타일 예시 </p> </body> </html>
위 예제에서는 3px 두께의 실선(solid) 테두리가 단락 주변에 표시됩니다. border-width 값을 변경하면서 테두리 두께가 어떻게 달라지는지 비교해 보면 속성의 동작 원리를 더 쉽게 이해할 수 있습니다.