CSS에서 요소의 왼쪽 테두리 너비를 지정하려면 border-left-width 속성을 사용합니다. 이 속성은 픽셀(px), em 등 다양한 단위로 값을 설정할 수 있으며, 테두리 스타일이 먼저 정의되어 있어야 화면에 정상적으로 표시됩니다.
border-left-width 속성 사용 예제
아래 코드는 문단(p) 요소에 점선(dashed) 테두리를 적용하고, 왼쪽 테두리만 10px로 굵게 설정하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dashed;
border-left-width: 10px;
}
</style>
</head>
<body>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
</body>
</html>실행 결과
위 코드를 실행하면 문단 전체에 점선 테두리가 나타나지만, 왼쪽 테두리만 다른 방향보다 눈에 띄게 두껍게(10px) 표시되는 것을 확인할 수 있습니다.
주요 포인트
border-left-width 속성은 단독으로 사용해도 무방하지만, 테두리가 보이지 않는 경우가 많습니다. 이는 기본 테두리 스타일이 none이기 때문입니다. 따라서 반드시 border-style(예: solid, dashed, dotted)을 함께 지정해 주어야 합니다.
또한 네 방향의 테두리 너비를 한 번에 조절하고 싶다면 border-width 단축 속성을 활용할 수 있으며, 개별 방향은 border-top-width, border-right-width, border-bottom-width로 각각 제어 가능합니다.