outline-width

CSS outline-width 속성은 요소 외곽선의 두께를 설정합니다. 외곽선은 요소의 테두리 바깥에 그려지는 선입니다.

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

구문

/* 키워드 값 */
outline-width: thin;
outline-width: medium;
outline-width: thick;

/* <length> 값 */
outline-width: 1px;
outline-width: 0.1em;

/* 전역 값 */
outline-width: inherit;

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

<length>
외곽선의 두께를 <length>로 설정합니다.
thin
사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 1px입니다.
medium
사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 3px입니다.
thick
사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 5px입니다.

형식 정의

초기값medium
적용대상all elements
상속no
Computed valuean absolute length; if the keyword none is specified, the computed value is 0
Animation typea length

형식 구문

<line-width>

where
<line-width> = <length> | thin | medium | thick

예제

요소의 외곽선 두께 설정하기

HTML

<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>

CSS

span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}

결과

명세

Specification Status Comment
CSS Basic User Interface Module Level 3
The definition of 'outline-width' in that specification.
Recommendation No change.
CSS Level 2 (Revision 1)
The definition of 'outline-width' 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-widthChrome 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 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
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.