CSS 테두리(border) 스타일 개요
HTML 요소의 테두리 스타일을 지정하려면 border-style 속성을 사용합니다. 이 속성을 활용하면 실선, 점선, 파선 등 다양한 형태의 테두리를 손쉽게 만들 수 있습니다.
border-style 속성에서 사용할 수 있는 주요 값은 다음과 같습니다.
- none: 테두리를 표시하지 않습니다.
- solid: 한 줄의 실선 테두리를 그립니다.
- dotted: 점들이 이어진 점선 테두리를 그립니다.
- dashed: 짧은 선들이 반복되는 파선 테두리를 그립니다.
- double: 두 줄의 실선으로 이루어진 이중 테두리를 그립니다.
- groove: 테두리가 페이지에 파인 듯한 입체 효과를 냅니다.
- ridge: groove와 반대로 튀어 나온 듯한 입체 효과를 냅니다.
- inset: 요소 전체가 페이지 안쪽으로 들어간 것처럼 보이게 합니다.
- outset: 요소 전체가 화면 밖으로 나온 것처럼 보이게 합니다.
- hidden: none과 동일하지만, 표(table) 요소의 테두리 충돌 해결 방식에서만 차이가 있습니다.
사용 시 주의 사항
border-width나 border-color를 지정하더라도 border-style이 설정되어 있지 않으면 테두리는 화면에 나타나지 않습니다. 따라서 테두리를 표시하려면 반드시 border-style 값을 함께 지정해야 합니다.
예제 코드
아래 코드를 실행하면 각각 다른 border-style 값이 적용된 테두리를 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "border-width:4px; border-style:none;"> 테두리가 없는 문단입니다. </p> <p style = "border-width:4px; border-style:solid;"> 실선(solid) 테두리입니다. </p> <p style = "border-width:4px; border-style:dashed;"> 파선(dashed) 테두리입니다. </p> <p style = "border-width:4px; border-style:double;"> 이중(double) 테두리입니다. </p> <p style = "border-width:4px; border-style:groove;"> 홈(groove) 테두리입니다. </p> </body> </html>
위 예제에서는 모든 문단에 4px의 테두리 두께를 적용하고, border-style 값만 바꿔 가며 테두리 모양의 변화를 비교했습니다. 직접 코드를 수정해 dotted, ridge, inset, outset 등 나머지 값도 테스트해 보면 각 스타일의 차이를 더욱 명확하게 이해할 수 있습니다.