[스타일시스] border-style속성의 값

테두리에 색상값을 지정할 때는 위와 같이 border-width 두께 속성과 함께 지정해야 테두리를 확인할 수 있습니다..

네 변의 테두리 색상값을 각각 다르게 설정할 때는 아래와 같이 합니다.
선택자{border-top-style:속성값;border-right-style:속성값;border-bottom-style:속성값;border-left-style:속성값;}

네 변의 테두리 두께값을 각각 다르게 설정하고자 한다면 아래와 같이 할 수 있습니다.
선택자{border-top-width:속성값;border-right-width:속성값;border-bottom-width:속성값;border-left-width:속성값

none : 테두리를 표시하지 않으며 굵기 0으로 설정, 표의 셀에 테두리가 중복되는 경우에는 다른값이 우선됩니다.
hidden : 테두리를 표시하지 않으며 굵기 0으로 설정, 표의 셀에 테두리가 중복되는 경우에는 이 값이 가장 우선됩니다.
solid : 테두리를 직선으로 표현합니다.
double : 테두리를 두줄로 표현합니다.
groove : 외곽선이 들어가 보이도록 입체적으로 표현합니다.
ridge : 테두리가 돌출되어 보이도록 입체적으로 표현합니다.
inset : 테두리의 안쪽 전체가 들어가 보이도록 입체적으로 표현합니다.
outset : 테두리의 안쪽 전체가 돌출되어 보이도록 입체적으로 표현합니다.
dashed : 테두리를 긴 점선으로 표시합니다.(익스플로러 5.5이상)
dotted : 테두리를 짧은 점선으로 표시합니다.(익스플로러 5.5이상)

ex)

.underline {
	font-family: "굴림", "Tahoma";
	font-size: 12px;
	color: #666666;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #cccccc;
}
.underline1 {
	font-family: "굴림", "Tahoma";
	font-size: 12px;
	color: #666666;
	text-decoration: none;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
}
.underline12 {
	font-family: "굴림", "Tahoma";
	font-size: 12px;
	color: #666666;
	text-decoration: none;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #CCCCCC;
}