개체의 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리 너비(두께)를 반환하거나 설정한다.

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

: (속성 문자열)
스타일 속성은 개체의 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리 너비(두께)를 나타내는 문자열이다.

medium 디폴트이며, 테두리가 중간 상태이다.
thin 테두리가 얇은 상태이다.
thick 테두리가 두꺼운 상태이다.
(너비) 부동소수점수치 다음에 cm, mm, in, pt, pcpx 등 길이 단위가 따르는 절대 길이, 혹은 em or ex 등의 단위가 따르는 상대 길이이다.

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

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

특기

이 속성은 네가지 값을 한번에 설정하거나 반환할 수 있는 복합 축약 속성이다.
네가지 속성의 순서는 top, right, botttom, left이다.

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

borderStyle 속성이 none으로 설정되어 있으면 borderWidth 속성은 표현되지 않는다.

적용
개체scriptCSS IE 버전
참조
border borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth

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



결과 표시창
<STYLE>
.border1Class { border:red;border-style:solid;border-width:10 }
.border2Class { border:red;border-style:solid dotted;border-width:10 20 }
.border3Class { border:red;border-style:solid dotted dashed ;border-width:10 20 30 }
.border4Class { border:red;border-style:solid dotted dashed inset ;border-width:10 20 30 40 }
.border5Class { border:thick dashed pink }
.noborderClass { border:none;border-width:red }
button {width:110;margin:2}
</STYLE>
<SCRIPT>
function showAll(){
  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 width=100%>
<TR>
<TD id="tdObj"><IMG src="../../gif/flower.jpg" width="300"></TD>
</TR>
</TABLE>
<BUTTON onclick="tdObj.className='border1Class';showAll()">border1Class</BUTTON>
<BUTTON onclick="tdObj.className='border2Class';showAll()">border2Class</BUTTON>
<BUTTON onclick="tdObj.className='border3Class';showAll()">border3Class</BUTTON><BR>
<BUTTON onclick="tdObj.className='border4Class';showAll()">border4Class</BUTTON>
<BUTTON onclick="tdObj.className='border5Class';showAll()">border5Class</BUTTON>
<BUTTON onclick="tdObj.className='noborderClass';showAll()">noborderClass</BUTTON>
<DIV id=showA>결과 표시창</DIV>