outline-style 속성

outline-style 속성은 공간을 차지하지 않는 외부 윤곽선의 스타일을 지정합니다.

구문

선택자 {
	outline-style: 값;
}

값	설명
`solid`	실선.
`dotted`	점선 윤곽선.
`dashed`	파선 윤곽선.
`ridge`	볼록한 선 모양의 윤곽선.
`double`	이중선 윤곽선. 효과를 보려면 윤곽선 두께가 최소 `3px` 이상이어야 합니다.
`groove`	오목한 윤곽선.
`inset`	안쪽으로 들어간(들여쓰기) 윤곽선.
`outset`	바깥쪽으로 나온(내어쓰기) 윤곽선.
`none`	윤곽선 없음.

기본값: none.

<div id="elem"></div>

#elem {
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	width: 300px;
	height: 100px;
}

<div id="elem"></div>

#elem {
	outline-width: 1px;
	outline-style: dotted;
	outline-color: black;
	width: 300px;
	height: 100px;
}

<div id="elem"></div>

#elem {
	outline-width: 1px;
	outline-style: dashed;
	outline-color: black;
	width: 300px;
	height: 100px;
}

<div id="elem"></div>

#elem {
	outline-width: 3px;
	outline-style: ridge;
	outline-color: black;
	width: 300px;
	height: 100px;
}

<div id="elem"></div>

#elem {
	outline-width: 3px;
	outline-style: double;
	outline-color: black;
	width: 300px;
	height: 100px;
}

<div id="elem"></div>

#elem {
	outline-width: 3px;
	outline-style: groove;
	outline-color: black;
	width: 300px;
	height: 100px;
}

<div id="elem"></div>

#elem {
	outline-width: 3px;
	outline-style: inset;
	outline-color: black;
	width: 300px;
	height: 100px;
}

<div id="elem"></div>

#elem {
	outline-width: 3px;
	outline-style: outset;
	outline-color: black;
	width: 300px;
	height: 100px;
}