CSS Attributes Index   Box Attributes

---

Sets or retrieves the border-right-width, border-right-style, and border-right-color of the object’s right border.

CSS	{ border-right: border-right-width | border-right-style | border-right-color }
Script	object.style.borderRight = [ sWidth ] [ sStyle ] [ strColor ] ]

border-right-width	sWidth	Any of the range of values available to the borderRightWidth property.
border-right-style	sStyle	Any of the range of values available to the borderRightStyle property.
border-right-color	strColor	Any of the range of values available to the borderRightColor property.

The property is read/write with a default value of medium none; the CSS attribute is not inherited.

The borderRight property is a shorthand ( composite ) property for setting the border-right-width, border-right-color, and border-right-style for the right border of an object.

All individual border properties not set by the composite borderRight property will be set to their default values. For example, the default value for border-right-width is medium.

For more information on supported colors, see the Color Table. If a border-right-color is not specified, the text color is used.

The SPAN and DIV objects must have either the position or the width attribute set in order to apply a border.

The following examples demonstrate use of inline event handlers to dynamically set the composite properties of the right border of an element. Both methods yield the same effect.

The sample below defines border-right style attributes in an embedded stylesheet, and invokes calls to the stylesheet to set an element’s right border characteristics in response to mouse events.

<style type="text/css">
<!--
   td { border: 10pt ridge beige }
   .groovy { border-right: 15pt groove yellow }
-->
</style>
...
<table>
<tr>
   <td onmouseover="this.className='groovy'"
      onmouseout="this.className=''">
         <img src="../shared/images/samp01.jpg">
   </td>
</tr>
</table>

Note that border-right applies only with border-width set.

 Show me 

The sample below uses inline event handlers to dynamically set an object’s borderRight property in response to mouse events.

<td onclick="this.style.borderRight='15pt groove yellow'"
   ondblclick="this.style.borderRight='10pt ridge beige'">
      <img src="../shared/images/samp13.jpg">
</td>

 Show me 

border-right-color, border-right-style, border-right-width