• Q&A
  • 회원가입
  • 로그인

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

목차
  1. border-style 예제 - 테두리 모양
  2. border-style 정의
  3. border-style 구문
  4. border-style 이슈 - none vs. hidden 차이


border-style 예제 - 테두리 모양

 
<style type="text/css">
h1 {border-width:5px; border-color:gray}
 
h1.none {border-style: none;}
h1.hidden {border-style: hidden;}

h1.dotted {border-style: dotted;}
h1.dashed {border-style: dashed;}
h1.solid {border-style: solid;}
h1.double {border-style: double;}

h1.groove {border-style: groove;}
h1.ridge {border-style: ridge;}
h1.inset {border-style: inset;}
h1.outset {border-style: outset;}
</style>

<h1 class="none">None 테두리 (homzzang.com)</h1>
<h1 class="hidden">Hidden 테두리 (homzzang.com)</h1>

<h1 class="dotted">Dotted 테두리 (homzzang.com)</h1>
<h1 class="dashed">Dashed 테두리 (homzzang.com)</h1>
<h1 class="solid">Solid 테두리 (homzzang.com)</h1>
<h1 class="double">Double 테두리 (homzzang.com)</h1>

<h1 class="groove">Groove 테두리 (homzzang.com)</h1>
<h1 class="ridge">Ridge 테두리 (homzzang.com)</h1>
<h1 class="inset">Inset 테두리 (homzzang.com)</h1>
<h1 class="outset">Outset 테두리 (homzzang.com)</h1>
 

border-style 정의


테두리 모양 지정.

 



1.
한번에 상하좌우 전체 지정도 가능하고, 개별 지정도 가능.
※ 속성값 개수에 따라 다름.

2.
  • 기본값: X
  • 상속여부: X
  • 애니효과: X
  • CSS버전: CSS1
  • JS구문: object.style.borderStyle="dotted double"
 
3.
주요 브라우저 모두 지원.
 
 

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>
 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012