outline 속성

outline 속성은 모든 면에 대해 공간을 차지하지 않는 외부 테두리(외곽선)의 색상, 유형 및 두께를 한 번에 설정하지만, border와 달리 이 테두리는 요소를 확장하지 않습니다. outline-width, outline-style, outline-color에 대한 축약 속성입니다(단, outline-offset는 제외).

구문

선택자 {
	outline: 두께 유형 색상;
}

속성 값의 순서는 중요하지 않습니다.

예제 . outline만 사용

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

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

예제 . outline과 border 속성 함께 사용

outline의 테두리는 외부에, border의 테두리는 내부에 표시됩니다:

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

#elem {
	outline: 4px solid green;
	border: 4px solid red;
	width: 300px;
	height: 100px;
}

참고 항목

외곽선의 오프셋을 설정하는 outline-offset 속성