⌘K

outline-style 속성

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

구문

css선택자 {
  outline-style: 값;
}

값

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

기본값: none.

예시 . solid 값

html<div id="elem"></div>
css#elem {
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

예시 . dotted 값

html<div id="elem"></div>
css#elem {
  outline-width: 1px;
  outline-style: dotted;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

예시 . dashed 값

html<div id="elem"></div>
css#elem {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

예시 . ridge 값

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: ridge;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

예시 . double 값

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: double;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

예시 . groove 값

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: groove;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

예시 . inset 값

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: inset;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

예시 . outset 값

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: outset;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

함께 보기

Backoutline-width 속성Next속성 outline-color