[border] CSS - border-style 속성 ★ - 테두리모양일괄 (= border-style속성 = 보더스타일속성)

1. border-style 예제 - 테두리 모양
2. border-style 정의
3. border-style 구문
4. border-style 이슈 - none vs. hidden 차이
5. border-style 예제 - 점선으로 세로선 만들기

border-style 예제 - 테두리 모양

border-style 정의

border-style 구문

 

selector {border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;}

 

---

[속성값]

 

none
테두리 아예 없음. (기본값)
테이블(=표) 테두리로 사용될 경우엔 테두리 보임. (= 테이블 테두리 경계충돌 해결 X)

hidden
있지만 눈에 안보이는 테두리.
테이블(=표) 테두리로 사용될 경우조차 테두리 안 보임. (= 테이블 테두리 경계충돌 해결 O) 

 

dotted  ★
점선 모양의 테두리.

dashed  ★
- (대쉬 = 막대바) 모양의 테두리.

 

solid  ★

2px 정도의 굵은 테두리.

 

double  ★

두 줄 모양의 테두리.

 

groove

3D 움푹 파인 홈 모양의 테두리 

※ groove: 홈 

 

ridge

3D 위로 올라온 것 같은 모양의 테두리 

※ridge: 산등성이

 

inset

3D 안으로 들어간 느낌의 테두리.

※상단과 좌측이 테두리 진하게 표시 

 

outset

3D 밖으로 나온 느낌의 테두리.

※ 우측과 하단이 테두리 진하게 표시.

 

initial
이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성값 상속.

 

---

[속성값 개수별 의미]

 

선택자 {border-style: 상하좌우;}
(예제)  border-style:dotted;

선택자 {border-style: 상하 좌우;}
(예제)  border-style:dotted solid;

선택자 {border-style: 상 좌우 하;}
(예제)  border-style:dotted solid double;

선택자 {border-style: 상 우 하 좌;} 
(예제) border-style:dotted solid double dashed;  (상단부터 시계방향)

 

border-style 이슈 - none vs. hidden 차이

 

1.

none과 hidden 속성값은 유사하나, 

테이블 테두리로 사용 시 차이 발생.

 

2.

solid 테두리 색깔이 나타나려면 두께가 2px 이상이여야 함. 

만약, 1px이면 <td>의 border 1px 값에 묻혀 안보이게 됨.

 

---

[예제]

<style type="text/css">

table {

   width: 720px;

   border: 2px solid red;

   border-collapse: collapse;

   clear:both;

   margin-bottom:50px;

}

table td {

   border: 1px solid blue;

}

.none {border-style: none;}

.hidden {border-style: hidden;}

.solid {border-style: solid;}

</style>

<table class=none>

<tr><td>None 테두리의 테이블</td><td>홈짱닷컴 (homzzang.com)</td></tr>

<tr><td>None 테두리의 테이블</td><td>홈짱닷컴 (homzzang.com)</td></tr>

</table>

<table class=hidden>

<tr><td>Hidden 테두리의 테이블</td><td>홈짱닷컴 (homzzang.com)</td></tr>

<tr><td>Hidden 테두리의 테이블</td><td>홈짱닷컴 (homzzang.com)</td></tr>

</table>

<table class=solid>

<tr><td>solid 테두리의 테이블</td><td>홈짱닷컴 (homzzang.com)</td></tr>

<tr><td>solid 테두리의 테이블</td><td>홈짱닷컴 (homzzang.com)</td></tr>

</table>

 

결과 보기

border-style 예제 - 점선으로 세로선 만들기

 

<style>

.box {background:black; padding:30px; border:none; overflow:hidden;}

.box div {float:left; width:calc(100%/3); height:100px;background:white; box-sizing:border-box;}

.box div:first-child {border-right: 1px dashed;}

.box div:last-child {border-left: 1px dashed;}

 

@media all and (max-width:480px) {

  .box div {width:100%;}

  .box div:first-child {border-bottom: 1px dashed;}

  .box div:last-child {border-top: 1px dashed;}  

}

</style>

 

<div class="box">

  <div>1</div>

  <div>2</div>

  <div>3</div>

</div>

 

결과보기