CSS Attributes Index   Box Attributes

---

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

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

border-bottom-width	sWidth	Any of the range of values available to the borderBottomWidth property.
border-bottom-style	sStyle	Any of the range of values available to the borderBottomStyle property.
border-bottom-color	strColor	Any of the range of values available to the borderBottomColor property.

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

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

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

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

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

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

 Show me 

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

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

 Show me 

border-bottom-color, border-bottom-style, border-bottom-width