CSS의 border-right-color 속성은 요소의 오른쪽 테두리 색상을 개별적으로 지정하는 데 사용됩니다. 네 방향 테두리 중 오른쪽 테두리에만 다른 색상을 적용할 수 있어, 강조 효과나 세밀한 디자인 조정에 유용합니다.
주요 특징
- 오른쪽 테두리의 색상만 독립적으로 변경할 수 있습니다.
- 색상 이름(red, blue), HEX 코드(#FF0000), RGB·RGBA 값 등 다양한 형식으로 지정할 수 있습니다.
- 테두리 스타일이 설정되어 있어야 색상이 화면에 표시되므로, 일반적으로
border-style과 함께 사용합니다.
사용 예제
다음 코드를 실행하면 border-right-color 속성의 동작을 직접 확인할 수 있습니다. 아래 예제는 문단 전체에 3px 두께의 실선 테두리를 적용한 뒤, 오른쪽 테두리 색상만 빨간색(#FF0000)으로 변경합니다.
<html>
<head>
<style>
p.demo {
border:3px solid;
border-right-color:#FF0000;
}
</style>
</head>
<body>
<p class = "demo">
India is a country.
</p>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 문단 주변에 3px 두께의 검은색 실선 테두리가 생성되며, 그중 오른쪽 테두리만 빨간색으로 표시됩니다.
참고 사항
border-right-color를 단독으로 사용하면 기본 테두리 스타일이 none이기 때문에 색상이 나타나지 않습니다. 반드시 border-style 또는 border 축약 속성으로 테두리를 먼저 정의해야 합니다. 또한 border: 3px solid red;처럼 축약형으로 작성하면 두께, 스타일, 색상을 한 번에 지정할 수 있어 코드가 더 간결해집니다.