CSS Attributes Index   Box Attributes

---

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

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

border-top-width	sWidth	Any of the range of values available to the borderTopWidth property.
border-top-style	sStyle	Any of the range of values available to the borderTopStyle property.
border-top-color	strColor	Any of the range of values available to the borderTopColor property.

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

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

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

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

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

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

 Show me 

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

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

 Show me 

border-top-color, border-top-style, border-top-width