CSS outline

CSS outline 속성은 요소의 바깥 테두리를 정의 해주며, border와 달리 픽셀 값이 요소 크기를 늘리지는 않습니다.

outline-color: Value;   
outline-style: Value;   
outline-width: Value;

outline:color style width

기본값:없음, 상속:안됨, 버전:CSS2

outline:#f40 solid 3px

outline:color style width

outline:#f40 solid 3px; border:3px solid #333;

outline-width:thin, medium, thick, px.....

solid hidden dotted dashed double groove ridge inset outset

<span style="outline: solid 3px; padding:5px; margin:3px;">solid</span>
<span style="outline: hidden 3px; padding:5px; margin:3px;">hidden</span>
<span style="outline: dotted 3px; padding:5px; margin:3px;">dotted</span>
<span style="outline: dashed 3px; padding:5px; margin:3px;">dashed</span>
<span style="outline: double 3px; padding:5px; margin:3px;">double</span>
<span style="outline: groove 3px; padding:5px; margin:3px;">groove</span>
<span style="outline: ridge 3px; padding:5px; margin:3px;">ridge</span>
<span style="outline: inset 3px; padding:5px; margin:3px;">inset</span>
<span style="outline: outset 3px; padding:5px; margin:3px;">outset</span>

outline-style, border-style과 같은 속성값을 가지고 있습니다.

CSS border

border 와 outline 차이

border border border

border:10px solid #333; margin:5px, margin값을 두고 border 두께 만큼  별도로 공간을 차지 합니다.

outline outline outline

outline:10px solid #333;; margin:5px, margin값을 무시하고 테두리를 만듭니다.