CSS border-bottom-width 속성이란?
border-bottom-width 속성은 HTML 요소의 하단 테두리(bottom border) 두께를 지정하는 CSS 속성입니다. 이 속성을 활용하면 상하좌우 테두리 중 아래쪽 테두리만 선택적으로 조절할 수 있어, 밑줄 강조나 콘텐츠 구분선 디자인에 유용하게 사용됩니다.
사용 가능한 값
- thin – 얇은 테두리 (약 1px)
- medium – 보통 두께의 테두리 (약 3px, 기본값)
- thick – 두꺼운 테두리 (약 5px)
- 길이 단위 – px, em, rem 등 원하는 수치로 직접 지정
주의할 점은 border-bottom-width 속성만 단독으로 사용하면 테두리가 화면에 나타나지 않는다는 것입니다. 이는 테두리 스타일의 기본값이 none이기 때문입니다. 따라서 반드시 border-style 속성을 함께 지정해야 합니다.
예제 코드
다음 코드를 실행하여 border-bottom-width 속성의 동작을 직접 확인해 보세요.
<html> <head> </head> <body> <p style = "border-bottom-width:6px;border-style:solid;"> This is demo content. </p> </body> </html>
코드 설명
위 예제에서는 문단(p) 요소에 border-bottom-width: 6px;를 적용해 아래쪽 테두리를 6픽셀 두께로 설정했습니다. 그리고 border-style: solid;를 함께 지정했기 때문에 실선 형태의 두꺼운 하단 테두리가 화면에 표시됩니다.
마무리
border-bottom-width 속성은 간단하지만 테두리 디자인을 세밀하게 제어할 수 있는 유용한 도구입니다. border-top-width, border-left-width, border-right-width 등 다른 방향의 속성과 함께 익혀두면 다양한 UI 스타일링에 큰 도움이 됩니다.