CSS border-top-width 속성이란?
border-top-width 속성은 요소의 위쪽 테두리(top border) 두께를 지정하는 CSS 속성입니다. 이 속성이 정상적으로 작동하려면 반드시 border-style이 함께 설정되어야 합니다. border-style의 기본값은 none이므로, 스타일을 지정하지 않으면 아무리 두께 값을 넣어도 테두리가 화면에 나타나지 않습니다.
사용할 수 있는 값
- thin – 얇은 테두리
- medium – 중간 두께(기본값)
- thick – 두꺼운 테두리
- 길이 값(length) –
px,em,rem등의 단위로 직접 지정
예제 코드
아래 예제는 border-top-width 속성을 사용하여 문단의 위쪽 테두리를 6px로 설정한 모습입니다.
<html>
<head>
</head>
<body>
<p style = "border-top-width:6px;border-style:solid;">
데모 콘텐츠입니다.
</p>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 문단 상단에 6px 두께의 실선(solid) 테두리가 표시됩니다. 두께 값을 3px, 10px 등으로 바꿔가며 테스트해 보면 속성의 동작 방식을 더욱 쉽게 이해할 수 있습니다.