CSS에서 요소의 테두리 모양을 정의하려면 border-style 속성을 사용합니다. 이 속성은 테두리가 실선인지, 점선인지, 아니면 아예 보이지 않는지 등을 결정하며, border-width와 함께 사용하면 원하는 두께와 스타일의 테두리를 쉽게 만들 수 있습니다.
기본 예제
아래 예제는 두 개의 문단에 각각 다른 테두리 스타일을 적용한 코드입니다.
<html> <head> </head> <body> <p style = "border-width:4px; border-style:none;"> 테두리가 표시되지 않는 문단입니다. </p> <p style = "border-width:4px; border-style:solid;"> 실선(solid) 테두리가 적용된 문단입니다. </p> </body> </html>
border-style에서 사용할 수 있는 주요 값
border-style 속성에는 다음과 같은 값들을 지정할 수 있습니다.
- none: 테두리를 표시하지 않습니다. 기본값입니다.
- solid: 하나의 실선으로 된 테두리를 그립니다.
- dashed: 파선(긴 점선) 형태의 테두리를 그립니다.
- dotted: 점선 형태의 테두리를 그립니다.
- double: 두 줄의 실선으로 이루어진 테두리를 그립니다.
- groove: 홈이 파인 듯한 입체적인 테두리를 그립니다.
- ridge: 능선처럼 솟아 보이는 입체적인 테두리를 그립니다.
- inset: 요소가 안쪽으로 눌려 있는 것처럼 보이는 테두리를 그립니다.
- outset: 요소가 바깥쪽으로 튀어나온 것처럼 보이는 테두리를 그립니다.
참고 사항
border-width만 설정하고 border-style을 지정하지 않으면 테두리가 화면에 나타나지 않습니다. 브라우저의 기본 스타일이 none이기 때문입니다. 따라서 테두리를 표시하려면 반드시 border-style 값을 함께 지정해야 합니다.