HTML DOM의 borderWidth 속성은 요소의 테두리 두께(border-width)를 한 번에 가져오거나 설정할 수 있는 축약형(shorthand) 속성입니다. 이 속성은 값을 1개에서 최대 4개까지 지정할 수 있으며, 값의 개수에 따라 적용 방식이 달라집니다.
값 개수에 따른 적용 규칙
값이 4개인 경우: 시계 방향(위 → 오른쪽 → 아래 → 왼쪽) 순서로 각 테두리의 두께가 지정됩니다.
값이 1개인 경우: 동일한 두께가 네 방향 테두리 모두에 적용됩니다.
값이 2개인 경우: 첫 번째 값은 위·아래 테두리에, 두 번째 값은 왼쪽·오른쪽 테두리에 적용됩니다.
문법(Syntax)
borderWidth 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderWidth = "thin|medium|thick|length|initial|inherit"
속성 값 정리
| 값 | 설명 |
|---|---|
| thin | 얇은 테두리를 지정합니다. |
| medium | 보통(중간) 두께의 테두리를 지정하며, 기본(default) 값입니다. |
| thick | 두꺼운 테두리를 지정합니다. |
| length | px, em 등 길이 단위를 사용해 테두리 두께를 직접 지정합니다. |
| initial | 해당 속성을 초기값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
예제 코드
다음 예제는 버튼을 클릭하면 div 요소의 테두리 두께가 변경되는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-width:30px;
}
</style>
<script>
function changeBorderWidth(){
document.getElementById("DIV1").style.borderWidth="5px";
document.getElementById("Sample").innerHTML="테두리 두께가 줄어들었습니다";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>아래 버튼을 클릭하면 div의 테두리 두께가 변경됩니다</p>
<button onclick="changeBorderWidth()">Change Border Width</button>
<p id="Sample"></p>
</body>
</html>실행 결과
처음 화면에서는 CSS로 지정된 border-width: 30px 덕분에 주황색 굵은 테두리가 표시됩니다.
이후 “Change Border Width” 버튼을 클릭하면 JavaScript가 실행되어 테두리 두께가 5px로 줄어들고, 그 결과가 화면에 반영됩니다.
이처럼 borderWidth 속성을 활용하면 별도의 CSS 수정 없이 JavaScript만으로 요소의 테두리 두께를 동적으로 제어할 수 있습니다.