DIV영역의 테두리선 종류를 잘 이용하면, DIV영역이 페이지에 잘 어울리도록 하거나 또는 눈에 잘 띄도록 할 수 있다.
[선의 종류]
[Solid 1px 을 적용한 모습]
[Dotted 1px 을 적용한 모습]
[Dashed 1px 을 적용한 모습]
[Double 5px 을 적용한 모습]
[Groove 5px 을 적용한 모습]
[Inset 5px 을 적용한 모습]
[Outset 5px 을 적용한 모습]
[선의 종류]
solid, dotted, dashed, double, groove, inset, outset, ridge
border: 선굵기 선종류 선색상;
border: 선굵기 선종류 선색상;
[Solid 1px 을 적용한 모습]
<div style="border: 1px solid #48BAE4; height: auto; padding:10px;">
Solid 1px을 적용한 모습
</div>
Solid 1px을 적용한 모습
</div>
[Dotted 1px 을 적용한 모습]
<div style="border: 1px dotted #48BAE4; height: auto; padding:10px;">
Dotted 1px을 적용한 모습
</div>
Dotted 1px을 적용한 모습
</div>
[Dashed 1px 을 적용한 모습]
<div style="border: 1px dashed #48BAE4; height: auto; padding:10px;">
Dashed 1px을 적용한 모습
</div>
Dashed 1px을 적용한 모습
</div>
[Double 5px 을 적용한 모습]
<div style="border: 5px double #48BAE4; height: auto; padding: 10px;">
Double 5px을 적용한 모습
</div>
Double 5px을 적용한 모습
</div>
[Groove 5px 을 적용한 모습]
<div style="border: 5px groove #48BAE4; height: auto; padding: 10px;">
Groove 5px을 적용한 모습
</div>
Groove 5px을 적용한 모습
</div>
[Inset 5px 을 적용한 모습]
<div style="border: 5px inset #48BAE4; height: auto; padding: 10px;">
Inset 5px을 적용한 모습
</div>
Inset 5px을 적용한 모습
</div>
[Outset 5px 을 적용한 모습]
<div style="border: 5px outset #48BAE4; height: auto; padding: 10px;">
Outset 5px을 적용한 모습
</div>
Outset 5px을 적용한 모습
</div>