CSS Attributes Index   Box Attributes

---

Sets or retrieves the border-width, border-style, and border-color to be drawn around the object.

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

border-width	sWidth	Any of the range of values available to the borderWidth property.
border-style	sStyle	Any of the range of values available to the borderStyle property.
border-color	strColor	Any of the range of values available to the borderColor property.

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

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

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

Setting border=thin is identical to saying border=thin none; the default value for color picks up the text color if one is not initially set. So, in addition to setting the border-width to thin, it will clear any border-style or border-color that has been previously set.

Setting a border to zero or omitting the attribute causes no border to be displayed. Supplying the border attribute without a value defaults to a single border.

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

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

The following example demonstrates the effects of applying composite border attributes to change an element’s border characteristics using the border shorthand notation. This demo requires Microsoft^® Internet Explorer^® 4 or later.

 Show me 

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

The sample below uses calls to an embedded stylesheet to dynamically show or hide an element’s border.

style type="text/css">
<!--
   .applyBorder { border: "5pt outset orange" }
   .removeBorder { border: "" }
-->
</style>
. . .
<table border>
<tr>
   <td onmouseover="this.className='applyBorder'"
      onmouseout="this.className='removeBorder'">
         <img src="../shared/images/sample.jpg">
  </td>
</tr>
</table>

 Show me 

The sample below uses inline event handlers to dynamically modify an object’s border properties in response to mouse events.

<td style="border='5pt inset silver'"
   onclick="this.style.border='10pt ridge sienna'"
   ondblclick="this.style.border='5pt inset silver'">
      <img src="../shared/images/samp14.jpg">
</td>

 Show me 

border-color, border-style, border-width