CSS의 border-color 속성은 HTML 요소의 테두리 색상을 지정하는 데 사용됩니다. 이 속성을 활용하면 네 면 전체에 하나의 색상을 적용할 수 있고, border-top-color, border-right-color, border-bottom-color, border-left-color 속성을 사용하면 각 면마다 다른 색상을 개별적으로 지정할 수도 있습니다.
기본 문법
CSS border-color 속성의 기본 문법은 다음과 같습니다.
Selector {
border-color: /*값*/
}border-color 값에는 색상 이름(예: red), HEX 코드(예: #d11c74), RGB/RGBA 값 등 다양한 형식을 사용할 수 있습니다. 또한 값을 1개~4개까지 나열하여 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 각각 다른 색상을 지정할 수 있습니다.
예제 1 – 여러 색상으로 테두리 꾸미기
다음 예제는 span 요소에는 세 가지 색상을, div 요소에는 두 가지 색상을 지정하여 테두리를 표현한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
span {
margin: 10px;
padding: 20px;
border-style: solid;
border-color: limegreen lightblue crimson;
}
div {
text-align: center;
border-style: solid;
border-color: palevioletred steelblue;
height: 16px;
}
</style>
</head>
<body>
<h2>데모 제목</h2>
<div>Demo</div>
<p><span>This</span>is demo text just for displaying how CSS styles works.</p>
</body>
</html>실행 결과
위 코드를 실행하면 아래와 같은 결과가 출력됩니다.
span 요소는 세 개의 색상 값이 시계 방향(위 → 오른쪽 → 아래)으로 적용되고, div 요소는 두 개의 색상이 위·아래 / 왼쪽·오른쪽 쌍으로 적용되는 것을 확인할 수 있습니다.
예제 2 – 개별 면에 색상 지정하기
다음 예제는 border-bottom-color 속성으로 목록 항목의 아래쪽 테두리만 점선 스타일의 청록색(cyan)으로 꾸미고, p 태그에는 HEX 색상 코드를 활용한 테두리를 적용한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
li {
border-bottom-color: cyan;
border-bottom-style: dotted;
width: 300px;
}
p {
text-align: center;
border-width: 8px;
border-style: solid;
border-color: #d11c74;
border-left-style: ridge;
}
</style>
</head>
<body>
<h2>자동차 액세서리</h2>
<p>자동차 액세서리 목록입니다</p>
<ul>
<li>머드 플랩</li>
<li>차량 방향제</li>
<li>휴대폰 거치대</li>
<li>블루투스</li>
<li>휠 잠금장치</li>
</ul>
</body>
</html>실행 결과
위 코드를 실행하면 아래와 같은 결과가 출력됩니다.
정리
border-color 속성은 테두리 색상을 자유롭게 조합할 수 있는 강력한 도구입니다. 단, 테두리 색상이 화면에 표시되려면 반드시 border-style 속성(solid, dotted, ridge 등)이 함께 지정되어야 한다는 점을 기억하세요. 기본값인 none 상태에서는 색상을 지정해도 테두리가 보이지 않습니다.