outline-style

CSS outline-style 속성은 요소 외곽선의 스타일을 설정합니다. 외곽선은 요소의 테두리 바깥에 그려지는 선입니다.

외곽선 외형을 설정할 땐 outline 단축 속성을 사용하는게 편리한 상황이 많습니다.

구문

/* 키워드 값 */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/* 전역 값 */
outline-style: inherit;
outline-style: initial;
outline-style: unset;

outline-style 속성은 다음 값 중 하나를 사용해 지정합니다.

auto

사용자 에이전트가 사용자 지정 외곽선을 그릴 수 있도록 허용합니다.

none

외곽선을 제거합니다. outline-width0입니다.

dotted

외곽선을 점 여러 개로 그립니다.

dashed

외곽선을 짧은 선 여러 개로 그립니다.

solid

외곽선을 하나의 선으로 그립니다.

double

외곽선을 두 개의 선으로 그립니다. outline-width는 두 선과 그 사이의 간격을 합친 값입니다.

groove

외곽선을 마치 파낸 것처럼 그립니다.

ridge

groove의 반대입니다. 외곽선을 마치 튀어나온 것처럼 그립니다.

inset

요소가 페이지 안에 박힌 것처럼 외곽선을 그립니다.

outset

inset의 반대입니다. 요소가 페이지 밖으로 나온 것처럼 그립니다.

형식 정의

초기값none
적용대상all elements
상속no
Computed valueas specified
Animation typediscrete

형식 구문

auto | <'border-style'>

예제

외곽선 스타일을 auto로 설정하기

auto 값은 사용자 지정 스타일을 의미합니다. 일반적으로 플랫폼 기본 사용자 인터페이스 스타일이거나, CSS에서 나타낼 수 있는 것보다 더 풍부한 스타일 (예컨대 둥근 꼭짓점에 바깥쪽 픽셀은 반투명하여 빛나는 것처럼 보이는 외곽선)입니다.

HTML

<div>
  <p class="auto">Outline Demo</p>
</div> 

CSS

.auto {
  outline-style: auto; /* same result as "outline: auto" */
}

/* To make the Demo clearer */ 
* { outline-width: 10px; padding: 15px; } 

결과

외곽선 스타일을 dashed, dotted로 설정하기

HTML

<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div> 

CSS

.dotted {
  outline-style: dotted; /* same result as "outline: dotted" */
}
.dashed {
  outline-style: dashed;
}

/* To make the Demo clearer */ 
* { outline-width: 10px; padding: 15px; } 

결과

외곽선 스타일을 solid, double로 설정하기

HTML

<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div> 

CSS

.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/* To make the Demo clearer */ 
* { outline-width: 10px; padding: 15px; } 

결과

외곽선 스타일을 groove, ridge로 설정하기

HTML

<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>

CSS

.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/* To make the Demo clearer */ 
* { outline-width: 10px; padding: 15px; }

결과

외곽선 스타일을 inset, outset으로 설정하기

HTML

<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>

CSS

.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/* To make the Demo clearer */ 
* { outline-width: 10px; padding: 15px; }

결과

명세

Specification Status Comment
CSS Basic User Interface Module Level 3
The definition of 'outline-style' in that specification.
Recommendation Added auto value.
CSS Level 2 (Revision 1)
The definition of 'outline-style' in that specification.
Recommendation Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
outline-styleChrome Full support 1Edge Full support 12Firefox Full support 1.5
Full support 1.5
No support 1 — 3.6
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 8Opera Full support 7Safari Full support 1.2WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
autoChrome Full support 1Edge Full support 79Firefox Full support 1.5IE No support NoOpera Full support 15Safari Full support 1.2WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.