border-style

Summary

박스의 테두리 영역의 스타일을 지정합니다.

값	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
기본값	none
적용대상	모든요소
상속	상속안됨
퍼센테이지	지정불가
미디어	Visual

Value

• none : 테두리 없음으로 지정합니다. border-style이 none으로 지정된경우 border-width에서 설정된 값을 0으로 만듭니다.
• hidden : 테두리를 숨깁니다. none과 같으나 테이블의 셀 요소라면 테두리를 통합합니다.
• dotted : 점선의 테두리로 지정합니다.
• dashed : 짧은 선들의 연속으로 지정합니다.
• solid : 실선으로 지정합니다.
• double : 두개의 실선으로 지정합니다.
• groove : 테두리가 안으로 파진것처럼 보입니다.
• ridge : 테두리가 밖으로 튀어나온것처럼 보입니다.
• inset : 테두리를 포함한 컨텐츠 영역이 안으로 들어간것처럼 보입니다.
• outset : 테두리를 포함한 컨텐츠 영역이 밖으로 튀어나온것처럼 보입니다.

Tip

1. border-style는 border-top-style, border-right-style, border-bottom-style, border-left-style들을 한꺼번에 지정하는 약식 속성입니다.
2. 값의 갯수에 따라 border-style이 설정되는 범위
   • div { border-style: solid }
     모든 마진들을 solid으로 설정
   • div { border-style: solid dashed }
     상, 하 = solid, 좌, 우 = dashed
   • div { border-style: solid dashed dotted }
     상=solid, 좌, 우=dashed, 하=dotted, left=dashed
3. 다음과 같이 사용할 수 있습니다.

   div {
       border-style: solid;
   }

Sample