CSS의 border-top-style 속성은 요소 상단 테두리(top border)의 스타일을 변경하는 데 사용됩니다. 이 속성을 활용하면 테두리 전체가 아닌 위쪽 테두리만 개별적으로 디자인할 수 있어, 보다 세밀하고 유연한 스타일링이 가능합니다.
주요 속성값
border-top-style 속성에 사용할 수 있는 대표적인 값은 다음과 같습니다.
- solid — 실선
- dashed — 파선(대시)
- dotted — 점선
- double — 이중선
- none — 테두리 없음
예제
아래 코드를 실행하면 상단 테두리 스타일이 실제로 어떻게 적용되는지 확인할 수 있습니다. 이 예제에서는 2px 두께의 실선(solid) 상단 테두리를 지정했습니다.
<html> <head> </head> <body> <p style = "border-width:2px; border-top-style:solid;"> 상단 테두리 예제 </p> </body> </html>
참고: border-top-style 속성은 단독으로 사용할 경우 일부 브라우저에서 테두리가 표시되지 않을 수 있습니다. 위 예제처럼 border-width 속성과 함께 사용하면 의도한 대로 상단 테두리가 정상적으로 렌더링됩니다.