outline 속성

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

구문

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

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

예제 . outline만 사용

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

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

Результат:

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

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

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

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

Результат:

참고 항목