하나의 선언만으로 상단 테두리의 모든 속성을 설정하려면 borderTop 속성을 사용하세요. 이 속성을 활용하면 border-top-width(상단 테두리 두께), border-top-style(상단 테두리 스타일), border-top-color(상단 테두리 색상) 세 가지 속성을 한꺼번에 지정할 수 있습니다.
예제
아래 예제 코드를 실행하면 JavaScript로 상단 테두리 속성을 다루는 방법을 직접 확인할 수 있습니다. 버튼을 클릭하면 div 요소의 상단 테두리가 새로운 스타일로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
width: 300px;
height: 200px
}
</style>
</head>
<body>
<div id="box">Demo Text</div>
<br><br>
<button type="button" onclick="display()">Change top border</button>
<script>
function display() {
document.getElementById("box").style.borderTop = "thick solid #000000";
}
</script>
</body>
</html>
위 코드에서 display() 함수가 호출되면 document.getElementById("box").style.borderTop를 통해 해당 요소의 상단 테두리가 "thick solid #000000", 즉 검은색 굵은 실선으로 변경됩니다. 이처럼 borderTop 속성은 개별 속성을 나눠서 설정할 필요 없이 짧고 간결한 코드로 상단 테두리 전체를 제어할 수 있어 유용합니다.