요소 주위에 표시되는 윤곽선(outline)의 너비를 설정하려면 outlineWidth 속성을 사용합니다. 아래 예제 코드를 실행하면 JavaScript만으로 요소 주위의 윤곽선 너비를 간단하게 지정할 수 있습니다.
참고로 윤곽선은 테두리(border)와 달리 레이아웃 공간을 차지하지 않으며, 요소 바깥쪽에 그려진다는 점이 특징입니다. 윤곽선을 표시하려면 outlineStyle과 outlineColor 속성도 함께 설정해야 합니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 450px;
background-color: orange;
border: 3px solid red;
margin-left: 20px;
}
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 윤곽선 너비가 적용됩니다.</p>
<div id="box">
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
</div>
<br>
<button type="button" onclick="display()">윤곽선 너비 설정</button>
<br>
<script>
function display() {
document.getElementById("box").style.outlineColor = "#5F5F5F";
document.getElementById("box").style.outlineStyle = "solid";
document.getElementById("box").style.outlineWidth = "7px";
}
</script>
</body>
</html>