CSS의 border-color 속성은 요소 테두리(border)의 색상을 지정하는 데 사용됩니다. 이 속성을 활용하면 웹 페이지의 각 요소에 원하는 색상의 테두리를 손쉽게 적용할 수 있습니다.
border-color 속성 예제
아래 코드는 border-color 속성을 실제로 구현한 예제입니다. 마룬(maroon) 계열의 색상(#800000)으로 점선 테두리를 적용했습니다.
<html>
<head>
<style>
p.demo {
border:2px dashed;
border-color:#800000;
}
</style>
</head>
<body>
<p class = "demo">
border-color 속성 적용 예시
</p>
</body>
</html>
색상 값 지정 방식
border-color 속성에는 다양한 형식의 색상 값을 사용할 수 있습니다.
- 16진수(HEX): 예)
#800000 - RGB / RGBA: 예)
rgb(128,0,0),rgba(128,0,0,0.5) - HSL / HSLA: 예)
hsl(0, 100%, 25%) - 색상 이름: 예)
red,blue,maroon - 투명:
transparent값도 지정 가능합니다.
각 변의 색상 개별 설정하기
border-color 속성은 최대 네 개의 값을 받아 각 변의 테두리 색상을 다르게 지정할 수 있습니다.
- 값 1개: 네 변 모두 동일한 색상 적용
- 값 2개: 첫 번째는 위/아래, 두 번째는 왼쪽/오른쪽에 적용
- 값 3개: 위, 좌/우, 아래 순서로 적용
- 값 4개: 시계 방향으로 위 → 오른쪽 → 아래 → 왼쪽 순서로 적용
또한 border-top-color, border-right-color, border-bottom-color, border-left-color 속성을 사용하면 특정 변의 색상만 따로 지정하는 것도 가능합니다.
참고 사항
border-color 속성은 단독으로 사용하면 테두리가 보이지 않습니다. 반드시 border-style(예: solid, dashed, dotted)과 border-width를 함께 지정해야 테두리가 화면에 나타납니다. 위 예제에서는 축약 속성인 border:2px dashed;로 스타일과 굵기를 먼저 설정한 뒤 색상만 변경한 방식입니다.