CSS로 테두리에 점선 설정하기
HTML 요소의 테두리를 점선으로 표시하려면 CSS의 border-style 속성을 사용하면 됩니다. 이 속성값 중 dotted를 지정하면 테두리가 일정한 간격의 점들로 이루어진 점선 형태로 렌더링됩니다.
일반적으로 border-style 속성은 border-width(테두리 두께)와 함께 사용하면 원하는 두께의 점선 테두리를 만들 수 있습니다.
예제 코드
아래 코드는 인라인 스타일로 border-style 속성값을 dotted로 지정하여 점선 테두리를 구현한 예제입니다.
<html> <head> </head> <body> <p style = "border-width:3px; border-style:dotted;"> This is a dotted border. </p> </body> </html>
코드 설명
- border-width: 3px; — 테두리의 두께를 3픽셀로 지정합니다.
- border-style: dotted; — 테두리 스타일을 점선(dotted)으로 지정합니다.
위 코드를 실행하면 문단(p 태그) 주위에 3px 두께의 점선 테두리가 나타나는 것을 확인할 수 있습니다. 참고로, 비슷한 스타일인 dashed(파선)와 달리 dotted는 작은 점이 연속된 모양의 테두리를 만든다는 점에서 차이가 있습니다.