CSS에서 요소의 네 방향 테두리 색상을 각각 다르게 지정하려면 border-color 속성을 사용합니다. 이 속성은 최대 4개의 색상 값을 가질 수 있으며, 값의 개수와 순서에 따라 적용되는 방향이 달라집니다.
border-color 속성의 값 적용 규칙
border-color 속성에 여러 값을 지정할 때는 다음과 같은 규칙이 적용됩니다.
- 값 4개: 위 → 오른쪽 → 아래 → 왼쪽 순서(시계 방향)로 적용됩니다.
- 값 3개: 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째는 아래에 적용됩니다.
- 값 2개: 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽에 적용됩니다.
- 값 1개: 네 방향 모두 동일한 색상이 적용됩니다.
예제 코드
아래 예제에서는 네 가지 색상 값을 사용해 문단의 테두리를 시계 방향으로 다르게 설정합니다. 참고로 border-color가 정상적으로 표시되려면 border-style 속성을 반드시 함께 지정해야 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dashed;
border-color: #808000 #800000 #FF0000 #FFFF00;
}
</style>
</head>
<body>
<p>네 가지 색상의 테두리가 적용된 데모 텍스트입니다.</p>
</body>
</html>실행 결과
위 코드를 실행하면 문단 주위에 점선(dashed) 스타일의 테두리가 생성되며, 위쪽은 올리브(#808000), 오른쪽은 마룬(#800000), 아래쪽은 빨강(#FF0000), 왼쪽은 노랑(#FFFF00)으로 각각 다르게 표시됩니다.
참고 사항
색상 값은 HEX 코드 외에도 rgb(), rgba(), hsl() 또는 red, blue 같은 색상 이름으로 지정할 수 있습니다. 또한 특정 방향만 따로 제어하고 싶다면 border-top-color, border-right-color, border-bottom-color, border-left-color 속성을 개별적으로 사용하는 것도 가능합니다.