CSS의 border-color 속성은 요소 테두리의 색상을 지정할 때 사용합니다. 이 속성을 활용하면 테두리 두께나 스타일은 그대로 유지하면서 원하는 색상만 자유롭게 변경할 수 있습니다.
기본 문법
테두리 색상은 HEX 코드, RGB 값, 또는 red, blue와 같은 색상 이름으로 지정할 수 있습니다. 아래 예제는 border-color 속성을 실제로 적용한 코드입니다.
예제
<html>
<head>
<style>
p.demo {
border:2px dashed;
border-color:#800000;
}
</style>
</head>
<body>
<p class = "demo">
David Beckham is a legend.
</p>
</body>
</html>코드 설명
위 예제에서 p.demo 선택자는 2px 두께의 점선(dashed) 테두리를 먼저 정의한 뒤, border-color:#800000;을 통해 테두리 색상을 진한 적갈색(마룬)으로 지정합니다. 브라우저에서 실행하면 해당 문단 주위에 마룬색 점선 테두리가 표시되는 것을 확인할 수 있습니다.
참고 사항
border-color 속성은 단독으로 사용할 경우 일부 브라우저에서 기본 테두리 스타일이 없으면 색상이 보이지 않을 수 있습니다. 따라서 border-style(예: solid, dashed, dotted)과 border-width를 함께 지정해 주는 것이 좋습니다. 또한 상(top), 우(right), 하(bottom), 좌(left) 각 변의 색상을 개별적으로 설정하려면 border-top-color, border-right-color 등의 하위 속성을 사용하면 됩니다.