CSS에서 요소 주위에 두 줄로 된 테두리를 만들고 싶다면 border-style 속성에 double 값을 사용하면 됩니다. double 값은 요소 바깥쪽에 두 개의 실선을 그려주며, 두 선 사이의 간격과 굵기는 지정한 border-width 값에 따라 자동으로 조절됩니다.
아래 예제 코드를 직접 실행하면서 border-style 속성이 어떻게 동작하는지 확인해 보세요.
예제 코드
<html> <head> </head> <body> <p style = "border-width:4px; border-style:none;"> 테두리가 없는 문단입니다. </p> <p style = "border-width:4px; border-style:double;"> 두 줄의 실선으로 이루어진 테두리입니다. </p> </body> </html>
코드 설명
첫 번째 문단에는 border-style: none이 적용되어 있어 아무리 border-width를 지정해도 테두리가 화면에 나타나지 않습니다.
반면 두 번째 문단에는 border-style: double이 적용되어 있어, 4px 두께의 영역 안에 두 줄의 실선 테두리가 그려집니다.
참고 사항
double 스타일이 제대로 표시되려면 border-width가 최소 3px 이상이어야 합니다. 값이 너무 작으면 두 줄이 겹쳐 보이거나 한 줄처럼 렌더링될 수 있으니, 충분한 두께를 지정하는 것이 좋습니다.