개체의 위쪽 테두리(border) 스타일 형식을 반환하거나 설정한다.

인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 개체의 위쪽 테두리 스타일 형식을 나타내는 문자열이다.

none 디폴트이며, 지정된 borderWidth에 관계없이 테두리가 그려지지 않는다.
dotted 테두리가 점선으로 그려진다. 이 값은 IE4.01에서 Macintosh 플래트폼에, IE5.5에서 Windows에 적용된다. Macintosh 플래트폼과 Windows 이전 Explorer 버전에서는 solid로 표현된다.
dashed 테두리가 긴점선(dash; '-')으로 그려진다.
solid 테두리가 실선으로 그려진다.
double 테두리가 이중 실전으로 그려진다. 두 실전과 그 사이의 공간의 합은 borderWidth 값과 같다. 이 값으로 이중 실성을 표현하기 위해서는 borderWidth 값이 3px 이상이어야 한다.
groove 테두리가 지정된 색상값에따라 3-D 홈파임(groove)으로 그려진다. 이 값을 제대로 표현하기 위해서는 개체의 borderWidth 속성을 설정하여야 한다.
ridge 테두리가 지정된 색상값에따라 3-D 중앙이 튀어나옴(ridge)으로 그려진다.
inset 테두리가 지정된 색상값에따라 3-D 튀어들어감(inset)으로 그려진다.
window-inset 테두리가 inset와 동일하게 그려지고, 추가적으로 외부에 지정된 색상값에따라 단일 선이 그려진다.
outset 테두리가 지정된 색상값에따라 3-D 튀어나옴(outset)으로 그려진다.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 none이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

IE5.5에서는, 이 속성이 인라인 엘레멘트에도 적용된다. 이전 버전에서는 인라인 엘레멘트는 position 속성값이 absolute이거나 이 속성을 이용하여 배치되어야 한다. heightwidth 속성의 설정된 값에 의하여 엘레멘트의 배치가 결정된다.

이 속성이 표현되기 위해서는 borderWidth 속성값이 0 이상으로 설정되어야 한다.

적용
개체scriptCSS IE 버전
참조
border borderTop borderTopColor borderTopStyle borderTopWidth

이 속성은 CSS2(Cascading Style Sheets Level 2)에 정의되었다.



결과 표시창
<STYLE>
.border1Class { border-top:10px groove pink }
.border2Class { border-top:10px dotted pink }
.border3Class { border-top:10px solid pink }
.border4Class { border-top:10px double pink }
.border5Class { border-top:10px inset pink }
.noborderClass { border-top:none }
button {width:110;margin:2}
</STYLE>
<SCRIPT>
function showAll(){
  str='tdObj.className='+tdObj.className+'<BR>';
  str+='tdObj.currentStyle.borderTopWidth='+tdObj.currentStyle.borderTopWidth+'<BR>';
  str+='tdObj.currentStyle.borderTopStyle='+tdObj.currentStyle.borderTopStyle+'<BR>';
  str+='tdObj.currentStyle.borderTopColor='+tdObj.currentStyle.borderTopColor+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
<TABLE border cellspacing=5>
<TR>
<TD id="tdObj"><IMG src="../../gif/flower.jpg" width="330"></TD>
</TR>
</TABLE>
<BUTTON onclick="tdObj.className='noborderClass';showAll()">noborderClass</BUTTON>
<BUTTON onclick="tdObj.className='border1Class';showAll()">border1Class</BUTTON>
<BUTTON onclick="tdObj.className='border2Class';showAll()">border2Class</BUTTON><BR>
<BUTTON onclick="tdObj.className='border3Class';showAll()">border3Class</BUTTON>
<BUTTON onclick="tdObj.className='border4Class';showAll()">border4Class</BUTTON>
<BUTTON onclick="tdObj.className='border5Class';showAll()">border5Class</BUTTON>
<DIV id=showA>결과 표시창</DIV>