박스모델 - 테두리(border) 스타일 지정

테두리는 모든 요소(인라인, 블럭레벨)에 적용되며 다음과 같은 속성을 가질 수 있습니다.

 

 

 

border-style (테스트 선 스타일)

 

테두리의 선 스타일을 지정한다. 값으로는 none, dotted, dashed, solid, double 과 3D 형인 groove, ridge, inset, outset 등이 있다.

 

none : 테두리 없음  /  dotted : 점선   /   dashed : 조금긴 점선   /   solid : 실선

double : 이중선   /   groove : 3D 선   /   ridge : 3D 선   /   inset : 3D 선   /  outset : 3D 선

 

 

 

border-width (테두리 너비)

 

테두리의 너비를 지정하는 속성으로 px, thin, medium, thick 값을 가질 수 없다. border-width 속성은 혼자서 사용할 수 없고, 반드시 border-style 속성을 지정한 후 사용해야 한다. 

 

 

 

border-color (테두리 색상)

 

테두리 색을 지정하는 속성으로 HTML 문서 색상 값을 사용한다. border-width 속성과 마찬가지로 혼자서는 사용할 수 없다. 반드시 border-style 속성을 지정한 후 사용해야 한다. 

 

 

 

※ 테두리의 개별적인 설정 방법

 

테두리에 개별적으로 스타일을 지정할 수 있는데 값은 width, style, color 순으로 지정하며, 각 테두리의 스타일을 지정할 때 사용하는 속성은 다음과 같다.

 

border-top-style : 테두리 위선

border-bottom-style : 테두리 아래선

border-left-style : 테두리의 왼선

border-rigth-style : 테두리의 오른선