CSS의 border-bottom-style 속성은 HTML 요소의 아래쪽 테두리(bottom border)의 스타일을 지정하는 데 사용됩니다. 테두리 두께를 설정하는 border-width와 함께 사용하면 원하는 모양의 하단 경계선을 쉽게 만들 수 있습니다.
사용 가능한 주요 값
border-bottom-style 속성에는 다음과 같은 값을 지정할 수 있습니다.
- none – 테두리를 표시하지 않음
- solid – 실선
- dashed – 파선(긴 점선)
- dotted – 점선
- double – 이중선
- groove / ridge / inset / outset – 입체적인 효과가 있는 테두리
예제 코드
다음 코드는 border-bottom-style 속성을 활용해 아래쪽 테두리에 dashed(파선) 스타일을 적용하는 예제입니다.
<html> <head> </head> <body> <p style = "border-width:4px;border-bottom-style:dashed;"> This is demo content </p> </body> </html>
실행 결과 설명
위 예제에서 border-width:4px;는 테두리의 두께를 4픽셀로 지정하고, border-bottom-style:dashed;는 아래쪽 테두리만 파선 형태로 표시합니다. 결과적으로 문단(p 태그)의 하단에 4px 두께의 점선 테두리가 나타나게 됩니다.
이처럼 border-bottom-style은 상단, 좌측, 우측 테두리에는 영향을 주지 않고 오직 아래쪽 테두리만 개별적으로 제어할 수 있어서, 특정 방향의 경계선만 강조하고 싶을 때 매우 유용합니다.