CSS Attributes Index   Box Attributes

---

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

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

border-left-width	sWidth	Any of the range of values available to the borderLeftWidth property.
border-left-style	sStyle	Any of the range of values available to the borderLeftStyle property.
border-left-color	strColor	Any of the range of values available to the borderLeftColor property.

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

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

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

For more information on supported colors, see the Color Table. If a border-left-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 left border of an element. Both methods yield the same effect.

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

<style type="text/css">
<!--
   td { border: 10pt ridge beige }
   .groovy { border-left: 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-left applies only with border-width set.

 Show me 

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

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

 Show me 

border-left-color, border-left-style, border-left-width