CSS의 border-bottom-width 속성은 요소 하단 테두리의 두께(너비)를 지정하는 데 사용됩니다. 이 속성을 활용하면 위쪽, 왼쪽, 오른쪽 테두리에 영향을 주지 않고 아래쪽 테두리만 원하는 두께로 조절할 수 있습니다.
단, border-bottom-width 속성은 테두리 스타일이 먼저 설정되어 있어야 정상적으로 작동합니다. 따라서 border-style 속성을 함께 지정해 주는 것이 좋습니다.
사용 예제
다음 코드를 실행하면 하단 테두리 두께가 6px로 적용된 결과를 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "border-bottom-width:6px;border-style:solid;"> This is demo content. </p> </body> </html>
주요 포인트
border-bottom-width 속성에는 다양한 값들을 사용할 수 있습니다.
사용 가능한 값:
- thin: 얇은 테두리 (약 1px)
- medium: 중간 두께의 테두리 (약 3px, 기본값)
- thick: 두꺼운 테두리 (약 5px)
- px, em 등의 단위: 정확한 두께를 직접 지정
이처럼 border-bottom-width 속성을 활용하면 요소의 하단 테두리를 세밀하게 디자인할 수 있어, 강조 표시나 구분선 스타일링에 유용하게 사용됩니다.