[CSS3] border 사용해서 테두리 넣기

1. 기본적인 사용법 소개

.box1{border:1px solid #000;} //테두리 굵기, 테두리 방식, 테두리 색상 순으로 작성 합니다.

 

2. 테두리 방식 

dotted -점선

dashed - 점선인데 dotted 보다 좀 긴점선

solid - 실선

double - 2줄

 

여러가지가 있는데 보통 solid 를 가장 많이 사용한다.

 

3.HTML 작성, 차이점 확인

div{width:200px; height:50px;}
.box1{border:5px solid #000;}
.box2{border:5px dotted #000;}
.box3{border:5px dashed #000;}
.box4{border:5px double #000;}

먼저 박스크기는 동일하게 작성, 방식만 다르게 작성했습니다.

<div class="box1">border solid</div><br />
<div class="box2">border dotted</div><br />
<div class="box3">border dashed</div><br />
<div class="box4">border double</div>

-결과

테두리 작성된걸 확인 가능합니다.