CSS에서 요소의 테두리를 점선(dotted)으로 표현하려면 border-style 속성을 사용합니다. 이 속성값을 dotted로 지정하면 테두리가 작은 점들이 이어진 형태로 렌더링됩니다.
핵심 속성 정리
- border-style : 테두리의 모양을 결정하며, 점선은
dotted값을 사용합니다. - border-width : 테두리의 두께를 지정합니다. 점선은 두께가 커질수록 점의 크기도 함께 커집니다.
예제 코드
아래 코드는 문단(p) 요소에 3px 두께의 점선 테두리를 적용한 예시입니다.
<html> <head> </head> <body> <p style = "border-width:3px; border-style:dotted;"> 이것은 점선 테두리입니다. </p> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 문단 주위에 3픽셀 두께의 점선 테두리가 나타납니다.
참고: dotted와 dashed의 차이
dotted는 말 그대로 점이 연결된 형태인 반면, dashed는 짧은 선(대시)이 반복되는 형태입니다. 디자인 의도에 따라 두 값을 비교해 보고 선택하는 것이 좋습니다.
추가 팁
테두리 색상을 변경하고 싶다면 border-color 속성을 함께 사용할 수 있습니다. 또한 네 변의 스타일을 각각 다르게 지정하려면 border-top-style, border-right-style 등 개별 속성을 활용하세요.