CSS border-top-color 속성이란?
border-top-color 속성은 요소의 상단 테두리(top border) 색상을 변경하는 데 사용되는 CSS 속성입니다. 요소 전체 테두리가 아닌 위쪽 테두리의 색상만 개별적으로 지정할 수 있어서, 다양한 디자인 효과를 구현할 때 유용하게 활용됩니다.
이 속성에는 색상 이름(red, blue 등), HEX 코드(#FF0000), RGB/RGBA 값, HSL 값 등 CSS에서 지원하는 모든 색상 표현 방식을 사용할 수 있습니다. 별도로 값을 지정하지 않으면 기본값인 currentColor가 적용되어 요소의 글자 색상이 테두리에 자동으로 반영됩니다.
사용 예제
다음 코드를 실행하면 border-top-color 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다. 아래 예제에서는 3px 두께의 실선(solid) 테두리를 가진 문단의 상단 테두리만 빨간색(#FF0000)으로 지정했습니다.
<html>
<head>
<style>
p.demo {
border:3px solid;
border-top-color:#FF0000;
}
</style>
</head>
<body>
<p class = "demo">
Asia is a continent.
</p>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 문단의 네 면 모두에 3px 실선 테두리가 생성되지만, 그중 위쪽 테두리만 빨간색으로 표시됩니다. 나머지 세 면(오른쪽, 아래쪽, 왼쪽)의 테두리는 기본값인 글자 색상을 따르게 됩니다.
함께 알아두면 좋은 관련 속성
- border-color: 네 면 테두리의 색상을 한 번에 지정
- border-bottom-color: 하단 테두리 색상 지정
- border-left-color: 왼쪽 테두리 색상 지정
- border-right-color: 오른쪽 테두리 색상 지정
- border-top-width, border-top-style: 상단 테두리의 두께와 스타일 지정