HTML 요소의 오른쪽 테두리 색상을 지정하려면 CSS의 border-right-color 속성을 사용합니다. 이 속성은 요소의 네 방향 테두리 중 오른쪽 테두리에만 개별적으로 색상을 적용할 수 있어서, 특정 면만 강조하고 싶을 때 유용합니다.
사용 방법
border-right-color 속성은 색상 이름(예: yellow), HEX 코드(예: #FFFF00), RGB 값 등 다양한 형식으로 지정할 수 있습니다. 단, 테두리 색상이 화면에 나타나려면 먼저 border-style 속성으로 테두리 스타일(solid, dotted, dashed 등)을 반드시 설정해야 합니다.
예제 코드
아래 예제에서는 문단(p) 요소에 점선(dotted) 테두리를 적용하고, 오른쪽 테두리만 노란색(#FFFF00)으로 지정했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted;
border-right-color: #FFFF00;
}
</style>
</head>
<body>
<p>This is demo text.</p>
</body>
</html>실행 결과
위 코드를 실행하면 문단 주변에 점선 테두리가 생성되고, 그중 오른쪽 테두리만 노란색으로 표시됩니다. 나머지 세 방향의 테두리는 기본 색상(현재 글자색)으로 렌더링됩니다.
참고 사항
테두리 두께가 0이거나 border-style이 none 또는 hidden으로 설정된 경우에는 색상이 보이지 않으므로 주의하세요. 네 방향 모두 다른 색상을 적용하고 싶다면 border-top-color, border-bottom-color, border-left-color 속성을 함께 사용하면 됩니다.