CSS Attributes Index   Box Attributes

---

Sets or retrieves the object’s border color.

CSS	{ border-color: strColor {1,4} }
Script	object.style.borderColor = strColor ]

strColor

String that specifies one of the color names or red-green-blue ( RGB ) values in the Color Table. Note Specifying the color as a color name may not be recognized by some browsers, whereas the RGB color value should always be displayed accurately.

The property is read/write with a default value equal to the value of the color property; the CSS attribute is not inherited.

"{1,4}" in the HTML syntax indicates that up to four different colors can be specified in this order: top, right, bottom, left. If one color is supplied, it is used for all four sides. If two colors are supplied, the first is used for the top and bottom, and the second is used for left and right. If three colors are supplied, they are used for top, right and left, and bottom, respectively.

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

The property is supported on block and replaced objects only.

The following examples demonstrate use of inline event handlers to dynamically set an element’s border color. Both methods yield the same effect.

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

<style>
   td { border: 10pt ridge }
  .khaki  { border-color: khaki }
</style>
...
<table>
<tr>
   <td onmouseover="this.className='khaki'" onmouseout="this.className=''">
      <img src="../shared/images/sample.jpg">
   </td>
</tr>
</table>

Note that border-width must be set to a value other than zero, to apply border-color.

 Show me 

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

<td onclick="this.style.borderColor='khaki'"
   ondblclick="this.style.borderColor=''">
      <img src="../shared/images/samp08.jpg">
</td>

 Show me 

border, border-style, border-width