HTML 요소의 하단 테두리 스타일을 지정하려면 CSS의 border-bottom-style 속성을 사용합니다. 이 속성에는 dotted(점선), double(이중선), dashed(파선), solid(실선)뿐만 아니라 inset, outset 등 다양한 값을 설정할 수 있습니다.
사용 가능한 주요 값
- dotted: 점으로 이루어진 테두리
- dashed: 짧은 선이 반복되는 파선 테두리
- solid: 끊김 없는 실선 테두리
- double: 두 줄로 된 이중 테두리
- inset: 안쪽으로 파인 듯한 입체 효과 테두리
- outset: 바깥쪽으로 돌출된 듯한 입체 효과 테두리
예제 코드
아래 예제를 실행하면 각각 다른 스타일의 하단 테두리가 적용된 문단을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-bottom-style: dotted;}
p.double {border-bottom-style: double;}
p.dashed {border-bottom-style: dashed;}
p.solid {border-bottom-style: solid;}
p.inset {border-bottom-style: inset;}
p.outset {border-bottom-style: outset;}
</style>
</head>
<body>
<p class = "dotted">점선(dotted) 하단 테두리</p>
<p class = "double">이중선(double) 하단 테두리</p>
<p class = "dashed">파선(dashed) 하단 테두리</p>
<p class = "solid">실선(solid) 하단 테두리</p>
<p class = "inset">입체(inset) 하단 테두리</p>
<p class = "outset">돌출(outset) 하단 테두리</p>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 여섯 개의 문단에 서로 다른 하단 테두리 스타일이 적용되어 나타납니다. 각 클래스별로 dotted, double, dashed, solid, inset, outset 스타일의 차이를 시각적으로 비교해 볼 수 있습니다.
참고로, 테두리 스타일을 지정하지 않으면 기본값인 none이 적용되어 테두리가 보이지 않으므로, 두께(border-bottom-width)와 색상(border-bottom-color)과 함께 사용하면 더욱 완성도 높은 디자인을 만들 수 있습니다.