outline-width 속성은 요소 주위에 그려지는 윤곽선(outline)의 두께를 지정하는 데 사용됩니다. 이 속성의 값은 px, em 등과 같은 길이 단위를 사용하거나, thin(얇게), medium(보통), thick(두껍게)이라는 키워드 중 하나를 지정할 수 있으며, 사용 방법은 border-width 속성과 동일합니다.
예제
아래 예제에서는 thin, thick 키워드와 5px 길이 값을 사용해 각기 다른 두께와 스타일의 윤곽선을 적용한 결과를 확인할 수 있습니다.
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;">
This text is having thick outline.
</p>
<br />
<p style = "outline-width:5px; outline-style:dotted;">
This text is having 5x outline.
</p>
</body>
</html>
주의 사항
outline-width 속성만 단독으로 사용하면 윤곽선이 화면에 나타나지 않습니다. 윤곽선을 실제로 표시하려면 반드시 outline-style 속성(solid, dashed, dotted 등)을 함께 지정해야 합니다. 또한 윤곽선은 테두리(border)와 달리 레이아웃 공간을 차지하지 않으므로, 요소의 크기나 위치에 영향을 주지 않는다는 점도 기억해 두면 유용합니다.