CSS에서 border-bottom-color 속성은 요소의 하단 테두리(bottom border) 색상만 별도로 지정할 때 사용합니다. 테두리 전체가 아닌 아래쪽 선의 색상만 바꾸고 싶을 때 유용한 속성입니다.
border-bottom-color 기본 문법
이 속성은 다음과 같은 형태로 사용합니다.
selector {
border-bottom-color: 색상값;
}색상값으로는 HEX 코드(예: #FF0000), RGB/RGBA 값, HSL 값, 그리고 red, blue 같은 색상 이름을 모두 사용할 수 있습니다.
예제 코드
아래 예제는 문단(p) 요소에 4px 두께의 실선 테두리를 적용한 뒤, 하단 테두리의 색상만 빨간색(#FF0000)으로 변경하는 코드입니다. 직접 실행해 보면서 결과를 확인해 보세요.
<html>
<head>
<style>
p.demo {
border: 4px solid;
border-bottom-color: #FF0000;
}
</style>
</head>
<body>
<p class = "demo">
하단 테두리 색상이 빨간색으로 변경된 예제입니다.
</p>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 문단의 네 방향 테두리는 검은색 실선으로 표시되지만, 아래쪽 테두리만 빨간색으로 나타나는 것을 확인할 수 있습니다.
함께 알아두면 좋은 관련 속성
- border-top-color : 상단 테두리의 색상을 지정합니다.
- border-left-color : 왼쪽 테두리의 색상을 지정합니다.
- border-right-color : 오른쪽 테두리의 색상을 지정합니다.
- border-color : 네 방향 테두리의 색상을 한 번에 지정합니다.
참고로 border-bottom-color 속성이 제대로 작동하려면 먼저 border-style(예: solid, dashed)과 border-width가 설정되어 있어야 합니다. 테두리 스타일이 none이거나 두께가 0이면 색상을 지정해도 화면에는 표시되지 않습니다.