CSS outline-width 속성 완벽 정리 – 요소 외곽선 두께 지정하기

outline-width 속성이란?

outline-width 속성은 요소의 테두리 바깥쪽에 특정 두께의 선을 그릴 때 사용합니다. border 속성과 비슷해 보이지만 중요한 차이가 있습니다. 아웃라인(outline)은 요소의 실제 크기(dimension)에 포함되지 않기 때문에, 레이아웃이나 요소 배치에 영향을 주지 않으면서 시각적인 강조 효과를 낼 수 있습니다.

문법(Syntax)

CSS outline-width 속성의 기본 문법은 다음과 같습니다.

Selector {
    outline-width: /*값*/
}

값으로는 thin, medium, thick 같은 키워드나 px, em 등의 길이 단위를 사용할 수 있습니다.

참고: outline-width를 선언하기 전에 반드시 outline-style 속성을 먼저 정의해야 합니다. outline-style이 지정되지 않으면 기본값이 none이라서 두께를 설정해도 화면에 나타나지 않습니다.

예제 1

outline-width 속성의 실제 사용 예시를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS outline-width</title>
<style>
span {
    margin: 15px;
    padding: 20px;
    border-style: solid;
    border-color: limegreen crimson;
    position: absolute;
    outline-width: 5px;
    outline-style: ridge;
    outline-color: orange;
    border-radius: 50%;
}
#showDiv {
    margin:auto;
    border-style: solid;
    border-color: darkmagenta dodgerblue;
    outline-style: dotted;
    outline-color: black;
    height: 80px;
    width: 80px;
}
#container {
    width:50%;
    margin:50px auto;
}
</style>
</head>
<body>
<div id="container">
<div id="showDiv"><span></span></div>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS outline-width 속성 완벽 정리 – 요소 외곽선 두께 지정하기

위 예제에서는 span 요소에 5px 두께의 ridge 스타일 오렌지색 아웃라인이 적용된 것을 확인할 수 있습니다.

예제 2

이번에는 텍스트가 있는 p 요소에 outline-width를 적용한 또 다른 예시입니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS outline-width</title>
<style>
#container {
    width:50%;
    margin:50px auto;
}
p {
    margin:auto;
    border-style: ridge;
    border-width: 15px;
    border-color: lightblue;
    outline-style: solid;
    outline-color: darkviolet;
}
</style>
</head>
<body>
<div id="container">
<p>Learning is fun with examples and live running code.</p>
</div></body></html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS outline-width 속성 완벽 정리 – 요소 외곽선 두께 지정하기

정리

outline-width 속성은 요소 주변에 두께를 가진 외곽선을 그려주는 CSS 속성입니다. border와 달리 레이아웃 계산에 포함되지 않으므로, 포커스 강조나 시각적 피드백 등에 유용하게 활용할 수 있습니다. 단, outline-style을 먼저 지정해야 한다는 점만 기억하면 됩니다.