CSS의 border-left-style 속성은 요소의 왼쪽 테두리(border-left)에 적용되는 선의 스타일을 지정하는 속성입니다. 테두리 두께나 색상과는 별개로, 실선·점선·파선 등 어떤 형태의 선으로 표시할지 결정할 수 있습니다.
주요 속성값
- none – 테두리를 표시하지 않음
- dotted – 점선(동그란 점) 스타일
- dashed – 파선(짧은 대시) 스타일
- solid – 실선 스타일
- double – 이중선 스타일
- groove / ridge / inset / outset – 입체적인 3D 효과 스타일
사용 예제
아래 코드는 border-left-style 속성을 활용해 문단의 왼쪽 테두리를 파선(dashed)으로 지정한 예제입니다. 직접 실행해 결과를 확인해 보세요.
<html> <head> </head> <body> <p style = "border-width:4px;border-left-style:dashed;"> This is demo content </p> </body> </html>
실행 결과 설명
위 예제에서는 먼저 border-width:4px;로 테두리 두께를 4픽셀로 설정한 뒤, border-left-style:dashed;를 통해 왼쪽 테두리만 파선 형태로 표현했습니다. 이처럼 border-left-style은 네 방향 중 왼쪽 테두리에만 개별적으로 스타일을 적용하고 싶을 때 유용하게 사용됩니다.
참고 사항
테두리 스타일이 none 또는 hidden으로 지정되면 border-width 값을 아무리 크게 설정해도 테두리가 화면에 나타나지 않습니다. 따라서 테두리를 보이게 하려면 반드시 none이 아닌 스타일 값을 함께 지정해야 합니다.