CSS의 border-bottom-color 속성은 요소의 아래쪽 테두리(bottom border) 색상을 지정하는 데 사용됩니다. 전체 테두리가 아닌 하단 테두리만 개별적으로 색상을 조절해야 할 때 유용하며, 강조 효과나 디자인 포인트를 주고 싶은 경우에 자주 활용됩니다.
주요 특징
- 색상 값은 HEX 코드(예: #FF0000), RGB/RGBA, HSL, 또는 색상 이름(red, blue 등)으로 지정할 수 있습니다.
- 테두리가 존재하지 않으면 색상이 적용되지 않으므로,
border-style이나border-width를 먼저 설정해야 합니다. - 기본값은 요소의
color속성 값(글자 색상)입니다.
사용 예제
다음 코드를 실행하면 border-bottom-color 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<html>
<head>
<style>
p.demo {
border:3px solid;
border-bottom-color:#FF0000;
}
</style>
</head>
<body>
<p class = "demo">
border-bottom-color 속성 예제
</p>
</body>
</html>코드 설명
위 예제에서는 p.demo 선택자를 통해 문단에 3px 두께의 실선(solid) 테두리를 먼저 설정했습니다. 그런 다음 border-bottom-color:#FF0000; 구문으로 아래쪽 테두리만 빨간색으로 변경했습니다. 결과적으로 상단, 좌우 테두리는 기본 글자 색상을 유지하고, 하단 테두리만 선명한 빨간색으로 표시되는 것을 확인할 수 있습니다.
참고 사항
테두리 색상을 한 번에 모두 지정하려면 border-color 단축 속성을 사용하는 것이 좋습니다. 반면 위쪽(border-top-color), 왼쪽(border-left-color), 오른쪽(border-right-color)처럼 각 방향별로 개별 제어가 필요하다면 해당 속성들을 함께 활용하면 됩니다.