outline

CSS outline 단축 속성은 모든 외곽선 속성을 한꺼번에 지정합니다.

구성 속성

outline은 단축 속성으로서 다음의 하위 속성을 포함합니다.

구문

/* style */
outline: solid;

/* color | style */
outline: #f66 dashed;

/* style | width */
outline: inset thick;

/* color | style | width */
outline: green solid 3px;

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

outline 속성은 아래의 값 중 한 개에서 세 개를 사용해 지정할 수 있으며 순서는 상관하지 않습니다.

참고: 많은 요소의 외곽선은 스타일을 지정하지 않을 경우 보이지 않습니다. 스타일 기본값이 none이기 때문인데, 주목할만한 예외는 <input> 요소로 브라우저의 기본 스타일이 적용됩니다.

<'outline-color'>
외곽선의 색을 설정합니다. 누락 시 기본값은 currentcolor입니다. outline-color를 참고하세요.
<'outline-style'>
외곽선의 스타일을 설정합니다. 누락 시 기본값은 none입니다. outline-style을 참고하세요.
<'outline-width'>
외곽선의 두께를 설정합니다. 누락 시 기본값은 medium입니다. outline-width를 참고하세요.

설명

테두리와 외곽선은 매우 유사하지만, 다음의 두 가지 차이점이 존재합니다.

  • 외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다.
  • 명세에 따르면 외곽선은 직사각형일 필요가 없습니다. 보통 직사각형으로 그리기는 합니다.

다른 모든 단축 속성과 마찬가지로, 누락한 하위 속성의 값은 초깃값으로 설정됩니다.

접근성 고려사항

outline0 또는 none 값을 지정하면 브라우저의 기본 포커스 스타일이 사라집니다. 만약 어떤 요소가 상호작용 가능하다면 반드시 시각으로 포커스 여부를 나타낼 수 있어야 합니다. 기본 포커스 스타일을 제거한 경우 다른 뚜렷한 대안을 제공하세요.

형식 정의

초기값as each of the properties of the shorthand:
적용대상all elements
상속no
Computed valueas each of the properties of the shorthand:
  • outline-color: For the keyword invert, the computed value is invert. For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
  • outline-width: an absolute length; if the keyword none is specified, the computed value is 0
  • outline-style: as specified
Animation typeas each of the properties of the shorthand:

형식 구문

[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

예제

외곽선으로 포커스 스타일 설정

HTML

<a href="#">This link has a special focus style.</a>

CSS

a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}

결과

명세

Specification Status Comment
CSS Basic User Interface Module Level 3
The definition of 'outline' in that specification.
Recommendation No change.
CSS Level 2 (Revision 1)
The definition of 'outline' in that specification.
Recommendation Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
outlineChrome Full support 1Edge Full support 12Firefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Firefox includes absolutely positioned elements inside the outline (see bug 687311).
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 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.