outline-style

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.

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

시도해보기

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

구문

css

/* 키워드 값 */
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-width가 0입니다.
dotted: 외곽선을 점 여러 개로 그립니다.
dashed: 외곽선을 짧은 선 여러 개로 그립니다.
solid: 외곽선을 하나의 선으로 그립니다.
double: 외곽선을 두 개의 선으로 그립니다. outline-width는 두 선과 그 사이의 간격을 합친 값입니다.
groove: 외곽선을 마치 파낸 것처럼 그립니다.
ridge: groove의 반대입니다. 외곽선을 마치 튀어나온 것처럼 그립니다.
inset: 요소가 페이지 안에 박힌 것처럼 외곽선을 그립니다.
outset: inset의 반대입니다. 요소가 페이지 밖으로 나온 것처럼 그립니다.

형식 정의

초기값	`none`
적용대상	all elements
상속	no
계산 값	as specified
Animation type	by computed value type

형식 구문

outline-style = 
  auto                  |
  <outline-line-style>

예제

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

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

HTML

html

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

CSS

css

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

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

결과

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

HTML

html

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

CSS

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

html

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

CSS

css

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

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

결과

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

HTML

html

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

CSS

css

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

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

결과

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

HTML

html

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

CSS

css

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

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

결과

명세

Specification
CSS Basic User Interface Module Level 4 # outline-style

브라우저 호환성

BCD tables only load in the browser