CSS에서 요소의 테두리에 점선(대시) 효과를 넣으려면 border-style 속성을 사용하면 됩니다. 이 속성의 값을 dashed로 지정하면 긴 점선 형태의 테두리가, dotted로 지정하면 촘촘한 점 형태의 테두리가 표시됩니다.
예제
아래 코드를 실행하면 border-style 속성의 값으로 dashed를 설정하여 점선 테두리를 구현할 수 있습니다.
<html>
<head>
</head>
<body>
<p style = "border-width:3px; border-style:dashed;">
점선 테두리 예제입니다.
</p>
</body>
</html>
추가 팁
border-width 속성으로 테두리의 두께를 조절할 수 있으며, 위 예제에서는 3px로 설정했습니다. 또한 다음과 같이 한 줄의 단축 속성(shorthand)으로 두께, 스타일, 색상을 동시에 지정할 수도 있습니다.
<p style = "border: 3px dashed #333;">
단축 속성으로 작성한 점선 테두리입니다.
</p>
테두리 색상은 별도로 지정하지 않으면 기본적으로 요소의 글자색(color)을 따르므로, 원하는 색상이 있다면 border-color 속성이나 단축 속성을 통해 명시적으로 지정하는 것이 좋습니다.