CSS의 border-top-style 속성은 요소의 상단 테두리(top border) 스타일을 지정하는 데 사용됩니다. 이 속성 하나만으로도 실선, 점선, 파선 등 다양한 형태의 테두리를 간단하게 구현할 수 있습니다.
사용 가능한 주요 값
border-top-style 속성에는 다음과 같은 값들을 지정할 수 있습니다.
- dashed – 파선(긴 점선) 형태의 테두리
- dotted – 점선 형태의 테두리
- solid – 실선 테두리
- double – 이중선 테두리
- groove, ridge, inset, outset – 입체적인 3D 효과가 있는 테두리
- none, hidden – 테두리를 표시하지 않음
예제 코드
아래 예제는 border-top-style 속성을 활용해 문단의 상단 테두리를 파선(dashed) 스타일로 지정하는 방법을 보여줍니다.
<html> <head> </head> <body> <p style = "border-width:4px;border-top-style:dashed;"> This is demo content </p> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 문단 상단에 두께 4px의 파선 테두리가 나타납니다. 테두리 스타일이 화면에 제대로 표시되려면 예제처럼 border-width 속성으로 테두리 두께를 함께 지정해 주는 것이 좋습니다.