이미지, 테이블, 레이어 등의 테두리 형식, 색상, 두께를 지정하는 속성입니다.

<div style="border:1px solid red">네 변의 테두리 속성을 동일하게 한번에 설정</div>
<div style="border-style:solid;border-width:1px">
     네 변의 테두리 속성을 동일하게 한번에 설정
</div>
<div style="border:1px solid red;border-width:2px 1px 2px 1px">
     네변의 테두리 두께를 달리 한번에 설정
</div>
<div style="border:1px solid red;border-width:2px 1px">상하,좌우 두께가 같을때 약식 설정</div>
<div style="border-top:2px solid red">상단 테두리 설정</div>
<div style="border-right:1px solid red">우측 테두리 설정</div>
<div style="border-bottom:2px solid red">하단 테두리 설정하</div>
<div style="border-left:1px solid red">좌측 테두리 설정하기</div>

이와같은 형태로 스타일, 두께 색상을 한번에 또는 상하좌우 따로 설정이 가능합니다.

 

1. 테두리 스타일 (border-style)

속성

설명

 none

 테두리를 사용하지 않음, border-width 의 값은 0이 된다.            

 dotteed        

 점선

 dashed

 굵은 점선

 solid

 실선 (가장 많이 사용하는 속성)

 double

 이중 실선

 groove

 오목하게 들어간 액자 테두리 모양

 ridge

 볼록하게 나온 액자 테두리 모양

 inset

 내용이 잠긴 느낌의 입체선 모양

 outset    

 내용이 튀어나온 느낌의 입체선 모양

 

2. 테두리 색상 (border-color)

색상명(black) 또는 색상코드(#000000)로 지정한다.

 

3. 테두리 두께 (border-width)

크기 단위 또는  중 하나를 선택하여 지정한다. (0은 테두리를 사용하지 않음)

<div style="border-width : [ thin | medium | thick | 크기단위 ]"></div>
<div style="border-width-top : [ thin | medium | thick | 크기단위 ]"></div>
<div style="border-width-right : [ thin | medium | thick | 크기단위 ]"></div>
<div style="border-width-bottom : [ thin | medium | thick | 크기단위 ]"></div>
<div style="border-width-left : [ thin | medium | thick | 크기단위 ]"></div>

이 게시물을..