CSS의 border-top-color 속성은 요소 상단 테두리(top border)의 색상만 별도로 지정할 때 사용합니다. 테두리 전체가 아닌 위쪽 선의 색깔만 바꾸고 싶을 때 유용한 속성입니다.
border-top-color 기본 문법
border-top-color: 색상값;
색상값은 HEX 코드(예: #FF0000), RGB/RGBA 값, 색상 이름(red, blue 등) 등 CSS에서 지원하는 모든 색상 표현 방식을 사용할 수 있습니다.
예제 코드
아래 예제는 3px 크기의 실선(solid) 테두리를 가진 문단에서, 상단 테두리의 색상만 빨간색(#FF0000)으로 지정하는 코드입니다.
<html>
<head>
<style>
p.demo {
border: 3px solid;
border-top-color: #FF0000;
}
</style>
</head>
<body>
<p class = "demo">
border-top-color 속성 적용 예시입니다.
</p>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 문단의 네 면에 검은색 실선 테두리가 생성되고, 그중 위쪽 테두리만 빨간색으로 표시됩니다.
참고 사항
border-top-color 속성이 정상적으로 동작하려면 먼저 border-style(solid, dashed 등)과 border-width가 설정되어 있어야 합니다. 테두리 스타일이 none이면 색상을 지정해도 화면에 나타나지 않습니다. 또한 각 변의 색상을 개별적으로 제어하려면 border-right-color, border-bottom-color, border-left-color 속성을 함께 활용하면 됩니다.