선의 모양(border-style)

선의 모양(border-style)
solid, double, groove, dotted, dashed, inset, outset, ridge, hidden

 

 

 

 

선의 굵기(border-width)와 선의 색상(border-color)은 별도로 설명할 필요는 없을 것 같아 선의 모양(border-style)과 같이 표현해 보겠다.

 

 style에 inset 을 넣고 노란색으로 10pt의 박스를 만든 예

style="border-width: 10pt; border-style: inset; border-color:yellow"

 

 테이블에 border style 을 적용한 예

스타일시트 소스

<style>
table { border-color: #408080; border-style: dashed; }
td { border-color: #FFBD32; border-style: ridge; }

</style>

 

 

 

이 밖에도 박스의 위/아래/좌/우를 별도로 지정해서 값을 지정할 수도 있다.

속성의 명칭은 border-style, border-width, border-color의 중간에 top. bottom, left, right 를 넣으면 된다.

예를 들면, 상단선의 색상의 속성 명칭은 border-top-color 이 된다.

 

 아래에 선을 넣은 예

style="border-bottom-color:green; border-bottom-style:dotted; border-bottom-width:10px;"

 

 좌/우에 선을 넣은 예

style="border-left-color:pink; border-left-style:double; border-left-width:20px; border-right-color:cyan; border-right-style:ridge; border-right-width:10px"