outline이란 요소를 시각적으로 확인하기 위하여 테두리(border) 바깥쪽에 생기는 선을 말한다.
일반 요소들에는 주지 않고 input, a, textarea, button, select처럼 focus를 받을 수 있는 요소들에 준다.
| 속성명 | 설명 | 가능한 값 예시 |
|---|---|---|
outline | outline-width, outline-style, outline-color를 한꺼번에 설정하는 단축 속성 | 2px solid blue, none |
outline-width | 외곽선 굵기 설정 | thin, medium, thick, 3px, 0 |
outline-style | 외곽선 스타일 설정 | none, solid, dotted, dashed, double 등 |
outline-color | 외곽선 색상 설정 | blue, #ff0000, transparent, currentColor |
outline-offset | 요소 경계(border)와 외곽선 사이 간격 조절 | 0, 2px, -1px (음수 가능) |