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 April 2017.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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 type	a 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