outline-style
CSS outline-style
속성은 요소 외곽선의 스타일을 설정합니다. 외곽선은 요소의 테두리 바깥에 그려지는 선입니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
외곽선 외형을 설정할 땐 outline
단축 속성을 사용하는게 편리한 상황이 많습니다.
구문
/* 키워드 값 */
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 |
Computed value | as specified |
Animation type | discrete |
형식 구문
auto | <'border-style'>
예제
외곽선 스타일을 auto
로 설정하기
auto
값은 사용자 지정 스타일을 의미합니다. 일반적으로 플랫폼 기본 사용자 인터페이스 스타일이거나, CSS에서 나타낼 수 있는 것보다 더 풍부한 스타일 (예컨대 둥근 꼭짓점에 바깥쪽 픽셀은 반투명하여 빛나는 것처럼 보이는 외곽선)입니다.
HTML
<div>
<p class="auto">Outline Demo</p>
</div>
CSS
.auto {
outline-style: auto; /* same result as "outline: auto" */
}
/* To make the Demo clearer */
* { outline-width: 10px; padding: 15px; }
결과
외곽선 스타일을 dashed
, dotted
로 설정하기
HTML
<div>
<div class="dotted">
<p class="dashed">Outline Demo</p>
</div>
</div>
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
<div>
<div class="solid">
<p class="double">Outline Demo</p>
</div>
</div>
CSS
.solid {
outline-style: solid;
}
.double {
outline-style: double;
}
/* To make the Demo clearer */
* { outline-width: 10px; padding: 15px; }
결과
외곽선 스타일을 groove
, ridge
로 설정하기
HTML
<div>
<div class="groove">
<p class="ridge">Outline Demo</p>
</div>
</div>
CSS
.groove {
outline-style: groove;
}
.ridge {
outline-style: ridge;
}
/* To make the Demo clearer */
* { outline-width: 10px; padding: 15px; }
결과
외곽선 스타일을 inset, outset으로 설정하기
HTML
<div>
<div class="inset">
<p class="outset">Outline Demo</p>
</div>
</div>
CSS
.inset {
outline-style: inset;
}
.outset {
outline-style: outset;
}
/* To make the Demo clearer */
* { outline-width: 10px; padding: 15px; }
결과
명세
Specification | Status | Comment |
---|---|---|
CSS Basic User Interface Module Level 3 The definition of 'outline-style' in that specification. |
Recommendation | Added auto value. |
CSS Level 2 (Revision 1) The definition of 'outline-style' in that specification. |
Recommendation | Initial definition. |
브라우저 호환성
BCD tables only load in the browser