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

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

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

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

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

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

특기

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

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

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

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

색상표를 참조하라.

적용
개체scriptCSS IE 버전
참조
border borderRight borderRightColor borderRightStyle borderRightWidth

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



결과 표시창
<STYLE>
.border1Class { border-right:10px groove pink }
.border2Class { border-right:10px dotted pink }
.border3Class { border-right:10px solid pink }
.border4Class { border-right:10px double pink }
.border5Class { border-right:10px inset pink }
.noborderClass { border-right:none }
button {width:110;margin:2}
</STYLE>
<SCRIPT>
function showAll(){
  str='tdObj.className='+tdObj.className+'<BR>';
  str+='tdObj.currentStyle.borderRightWidth='+tdObj.currentStyle.borderRightWidth+'<BR>';
  str+='tdObj.currentStyle.borderRightStyle='+tdObj.currentStyle.borderRightStyle+'<BR>';
  str+='tdObj.currentStyle.borderRightColor='+tdObj.currentStyle.borderRightColor+'<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>