outline-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

시도해 보기

outline-width: 12px;

outline-width: thin;

outline-width: medium;

outline-width: thick;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

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

구문

css
/* 키워드 값 */
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
계산 값an absolute length; if the keyword none is specified, the computed value is 0
Animation typea length

형식 구문

outline-width = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

예제

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

HTML

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

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
CSS Basic User Interface Module Level 4
# outline-width

브라우저 호환성