CSS에서 요소의 테두리를 점선(dashed line) 형태로 표현하려면 border-style 속성의 값을 dashed로 지정하면 됩니다. 이 속성은 실선(solid), 점선(dotted), 이중선(double) 등 다양한 테두리 스타일을 정의하는 데 사용되며, 그중 dashed 값은 대시(—) 모양이 반복되는 점선 테두리를 만들어 줍니다.
기본 문법
border-style: dashed;
테두리 두께는 border-width 속성으로 함께 지정해 주는 것이 좋습니다. 두께를 지정하지 않으면 기본값이 적용되어 의도한 디자인과 다르게 보일 수 있습니다.
예제
다음 코드는 border-style 속성의 값을 dashed로 설정하여 점선 테두리를 구현한 예제입니다. 직접 실행해 결과를 확인해 보세요.
<html> <head> </head> <body> <p style = "border-width:3px; border-style:dashed;"> This is a dotted border. </p> </body> </html>
코드 설명
- border-width: 3px; — 테두리의 두께를 3픽셀로 지정합니다.
- border-style: dashed; — 테두리를 대시 형태의 점선으로 표시합니다.
참고: 단축 속성 활용
위 예제처럼 두께와 스타일을 각각 지정하는 대신, border 단축 속성을 사용하면 한 줄로 간결하게 작성할 수 있습니다.
<p style="border: 3px dashed #333;"> 점선 테두리 예제입니다. </p>
이렇게 하면 두께(3px), 스타일(dashed), 색상(#333)을 동시에 설정할 수 있어 코드가 더 깔끔해집니다. 참고로 dotted 값은 작은 점이 이어지는 점선을 만들며, dashed보다 더 촘촘한 점선 효과가 필요할 때 유용합니다.