개체의 테두리(border) 속성들을 복합 축약 속성으로 반환하거나 설정한다.

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

: (속성 문자열)
스타일 속성은 개체의 테두리(border) 속성들을 복합 축약 속성으로 나타내는 문자열이다.

(너비) width borderWidth 속성에서 유효한 배경의 위치값이다.
(스타일) style borderStyle 속성에서 유효한 배경의 위치값이다.
(색상) color borderColor 속성에서 유효한 배경의 위치값이다.

이 속성은 읽기/쓰기이며, 디폴트값은 medium none이다.

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

특기

border 속성은 네 테두리(border)의 width, stylecolor 값들을 한번에 설정하는 복합 축약 속성이다.

widthcolor를 지정할 때, style을 지정하여야 테두리가 나타나고, 지정하지 않으면 테두리가 표시되지 않는다.

border 복합 축약 속성으로 모든 개별 테두리 속성들을 지정하지 않으면 지정되지 않은 속성에는 디폴트값이 적용된다. 예를들어 width의 디폴트값은 medium이다.

border=thin로 설정하는 것은 border=thin none과 동일하다. 테두리 색상이 설정되어 있지 않으면 테두리 색상의 디폴트값은 텍스트 색상과 같다. 따라서 width 속성을 thin으로 설정할 뿐 아니라, 이전에 설정되었던 style이나 color 값을 지운다.

border 속성을 0으로 설정하거나 애트리뷰트를 생략하면 테두리가 나타나지 않는다. border 속성을 값없이 설정하면 디폴트인 단일 테두리가 적용된다.

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

color가 지정되지 않으면, 텍스트 색상이 적용된다.

색상표를 참조하라.

적용
개체scriptCSS IE 버전
참조
border borderColor borderStyle borderWidth

이 속성은 (영문)DOM(Document Object Model Level 1)과 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.



결과 표시창
<STYLE>
.border1Class { border:10px groove pink }
.border2Class { border:10px dotted pink }
.border3Class { border:10px solid pink }
.border4Class { border:10px double pink }
.border5Class { border:10px inset pink }
.noborderClass { border:none }
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='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>