개체의 테두리(border) 색상을 반환하거나 설정한다.

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

: (속성 문자열)
스타일 속성은 개체의 테두리(border) 색상을 나타내는 문자열이다.

색상표의 색상명이나 RGB 색상값이다.

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

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

특기

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

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

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

일부 브라우저에서 색상이름을 인식하지 못할 수 있지만, 모든 브라우저는 RGB 색상은 인식하고 올바르게 디스플레이하여야 한다.

적용
개체scriptCSS IE 버전
참조
border borderColor borderBottomColor borderLeftColor borderRightColor borderTopColor

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



결과 표시창
<STYLE>
.border1Class { border:10px;border-style:solid;border-color:pink }
.border2Class { border:10px;border-style:solid;border-color:pink red }
.border3Class { border:10px;border-style:solid;border-color:pink red blue }
.border4Class { border:10px;border-style:solid;border-color:pink red blue green }
.border5Class { border:10px dashed pink }
.noborderClass { border:none;border-color: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>