CSS에서 border-top 속성을 사용하면 요소의 상단 테두리와 관련된 모든 속성을 하나의 선언으로 간편하게 설정할 수 있습니다.
border-top 속성이란?
border-top은 다음 세 가지 하위 속성을 축약형(shorthand)으로 한꺼번에 지정할 수 있는 단축 속성입니다.
- border-top-width — 상단 테두리의 두께
- border-top-style — 상단 테두리의 스타일(solid, dashed, dotted 등)
- border-top-color — 상단 테두리의 색상
속성 값은 border-top: 두께 스타일 색상; 순서로 작성하며, 필요하지 않은 값은 생략해도 됩니다. 단, 스타일 값을 생략하면 기본값이 none이므로 테두리가 화면에 나타나지 않으므로 주의해야 합니다.
예제 코드
다음 예제는 border-top 속성을 활용하여 문단의 상단 테두리를 굵은 노란색 점선(dashed)으로 지정한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-top: thick dashed #FFFF00;
}
</style>
</head>
<body>
<p>This is demo text</p>
</body>
</html>코드 설명
위 예제에서 p 요소에는 먼저 border-style: solid;로 전체 테두리 스타일을 지정한 뒤, border-top: thick dashed #FFFF00;를 통해 상단 테두리만 두께(thick), 스타일(dashed), 색상(#FFFF00, 노란색)을 한 번에 재정의합니다. 그 결과 왼쪽·오른쪽·아래쪽 테두리는 실선(solid)으로 유지되고, 상단 테두리만 굵은 노란색 점선으로 표시됩니다.
정리
상단 테두리의 두께, 스타일, 색상을 개별적으로 작성하는 대신 border-top 단축 속성을 사용하면 코드가 더 간결해지고 유지보수도 쉬워집니다. 여러 요소의 테두리 스타일을 일관성 있게 관리할 때 특히 유용합니다.