개체의 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리 스타일 형식을 반환하거나 설정한다.

인수

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이거나 이 속성을 이용하여 배치되어야 한다. height나 width 속성의 설정된 값에 의하여 엘레멘트의 배치가 결정된다.

적용

개체	script	CSS	IE 버전

참조

border borderStyle borderBottomStyle borderLeftStyle borderRightStyle borderTopStyle

이 속성은 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.

tdObj.style.borderStyle : dashed dotted solid double groove ridge inset window-inset outset none

결과 표시창

<STYLE>
.tdClass{border:solid 10 pink}
</STYLE>
<SCRIPT>
function showAll(idx){
  tdObj.style.borderStyle=selObj.options[idx].text;
  str='tdObj.className='+tdObj.className+'<BR>';
  str+='tdObj.currentStyle.borderWidth='+tdObj.currentStyle.borderWidth+'<BR>';
  str+='tdObj.currentStyle.borderStyle='+tdObj.currentStyle.borderStyle+'<BR>';
  str+='tdObj.currentStyle.borderColor='+tdObj.currentStyle.borderColor+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
<TABLE border cellspacing=5>
<TR>
<TD id="tdObj" class="tdClass"><IMG src="../../gif/flower.jpg" width="330"></TD>
</TR>
</TABLE>
tdObj.style.borderStyle : <SELECT id="selObj" onchange="showAll(this.options.selectedIndex)">
<OPTION>dashed
<OPTION>dotted
<OPTION>solid
<OPTION>double
<OPTION>groove
<OPTION>ridge
<OPTION>inset
<OPTION>window-inset
<OPTION>outset
<OPTION selected>none
</SELECT>
<DIV id=showA style=height:5em>결과 표시창</DIV>