CSS의 border-left-color 속성은 요소의 왼쪽 테두리 색상만 별도로 지정할 수 있는 속성입니다. 전체 테두리가 아닌 한쪽 면에만 다른 색상을 적용하고 싶을 때 유용하며, 강조 표시나 디자인 포인트를 만들 때 자주 활용됩니다.
색상 값은 HEX 코드(예: #FF0000), RGB/RGBA 값, HSL 값 또는 red, blue 같은 색상 이름 등 CSS에서 지원하는 모든 색상 표현 방식을 사용할 수 있습니다.
예제 코드
아래 예제는 기본적으로 3px 굵기의 검은색 실선 테두리를 설정한 뒤, border-left-color 속성으로 왼쪽 테두리만 빨간색(#FF0000)으로 변경하는 코드입니다.
<html>
<head>
<style>
p.demo {
border:3px solid;
border-left-color:#FF0000;
}
</style>
</head>
<body>
<p class = "demo">
border-left-color 속성 적용 예제
</p>
</body>
</html>
실행 결과 및 설명
위 코드를 실행하면 문단의 네 면 중 왼쪽 테두리만 빨간색으로 표시되고, 나머지 위·오른쪽·아래 테두리는 기본 색상(검정)으로 유지됩니다.
참고 사항
- 테두리 색상이 적용되려면 먼저
border-style과border-width가 설정되어 있어야 합니다. 스타일이 none이면 색상은 화면에 나타나지 않습니다. - 네 면을 각각 제어하려면
border-top-color,border-right-color,border-bottom-color속성도 함께 사용할 수 있습니다.