outline-style 속성은 요소의 테두리(border) 바깥쪽에 선을 그려주는 CSS 속성입니다. border 속성과 유사해 보이지만 중요한 차이점이 있습니다. 바로 아웃라인(outline)은 요소의 실제 크기(너비·높이) 계산에 포함되지 않는다는 점입니다. 따라서 레이아웃에 영향을 주지 않으면서도 시각적으로 강조 효과를 낼 수 있어 포커스 표시나 하이라이트 처리에 자주 활용됩니다.
문법(Syntax)
CSS outline-style 속성의 기본 문법은 다음과 같습니다.
Selector {
outline-style: /*값*/
}
outline-style에 사용할 수 있는 대표적인 값으로는 none, solid, dashed, dotted, double, groove, ridge, inset, outset 등이 있습니다.
예제 1: double과 groove 스타일 적용하기
다음 예제는 원형 요소에는 double 아웃라인을, 사각형 div에는 groove 아웃라인을 적용한 모습입니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS outline-style</title>
<style>
span {
margin: 15px;
padding: 20px;
border-style: solid;
border-color: #dc3545;
position: absolute;
outline-width: 5px;
outline-style: double;
outline-color: orange;
border-radius: 50%;
}
#showDiv {
margin:auto;
border-style: solid;
border-color: darkmagenta dodgerblue;
outline-style: groove;
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>
실행 결과
위 코드를 실행하면 빨간색 원형 테두리 주위로 이중선(double) 형태의 주황색 아웃라인이 나타나고, 사각형 div에는 홈이 파인 듯한 입체적인 groove 스타일의 검은색 아웃라인이 표시됩니다.
예제 2: dashed 아웃라인 적용하기
이번에는 문단(p) 요소에 dashed 스타일의 아웃라인을 적용해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS outline-style</title>
<style>
#container {
width:50%;
margin:50px auto;
}
p {
margin:auto;
border-style: ridge;
border-width: 10px;
border-color: lightblue;
outline-style: dashed;
outline-color: violet;
}
</style>
</head>
<body>
<div id="container">
<p>Video Tutorials helps in understanding the technology with live running examples and practical implementation.</p>
</div>
</body></html>
실행 결과
위 코드를 실행하면 연한 파란색 ridge 테두리 바깥쪽에 보라색(violet) 점선(dashed) 아웃라인이 그려진 것을 확인할 수 있습니다.
정리
outline-style 속성은 요소의 크기나 레이아웃에 영향을 주지 않으면서 외곽에 다양한 선 스타일을 추가할 수 있는 유용한 도구입니다. 특히 폼 요소의 포커스 상태 표시나 접근성 향상을 위한 시각적 피드백에 널리 사용되므로, border 속성과의 차이를 정확히 이해하고 상황에 맞게 활용하는 것이 좋습니다.