CSS의 border-bottom-style 속성은 요소 하단 테두리의 스타일을 지정하는 데 사용됩니다. 이 속성을 활용하면 실선, 점선, 파선 등 다양한 형태의 테두리를 손쉽게 만들 수 있습니다.
사용 가능한 주요 값
border-bottom-style 속성에 적용할 수 있는 대표적인 값은 다음과 같습니다.
- dashed – 긴 선이 반복되는 파선 스타일
- dotted – 점이 이어진 점선 스타일
- solid – 끊김 없는 실선 스타일
- double – 두 줄의 실선 스타일
- groove / ridge – 입체적으로 보이는 홈 또는 융기 스타일
- inset / outset – 안으로 들어가거나 밖으로 나온 것처럼 보이는 입체 스타일
- none / hidden – 테두리를 표시하지 않음
예제 코드
아래 코드를 실행하면 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를 통해 요소의 아래쪽에만 파선 형태의 테두리가 나타나도록 했습니다. 다른 값을(예: solid, dotted)으로 바꿔 입력하면 각각 다른 테두리 스타일을 확인할 수 있습니다.