CSS Attributes Index   Box Attributes

---

Sets or retrieves the style of the object’s left, right, top, and bottom borders.

CSS	{ border-style: 'none' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' }
Script	object.style.borderStyle = sStyle ]

none	No border is drawn ( regardless of any border-width ).
dotted	Border is a dotted line on the Macintosh platform as of Microsoft® Internet Explorer® 4.01, and a solid line on the Windows and Unix platforms.
dashed	Border is a dashed line on the Macintosh platform as of Internet Explorer® 4.01, and a solid line on the Windows and Unix platforms.
solid	Border is a solid line.
double	Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the border-width value. The border width must be at least 3 pixels wide to draw a double border.
groove	3-D groove is drawn in colors based on the value.
ridge	3-D ridge is drawn in colors based on the value.
inset	3-D inset is drawn in colors based on the value.
outset	3-D outset is drawn in colors based on the value.

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

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

A border-width greater than 0 must be set for the border-style attribute to render.

The following example demonstrates the effects of applying the different values possible for the CSS border-style attribute.

 Show me 

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

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

<style>
   td { border-style: solid; border-width: 10pt }
   .groovy { border-style: groove }
</style>
...
<table>
<tr>
   <td onmouseover="this.className='groovy'" onmouseout="this.className=''">
      <img src="../shared/images/sample.jpg">
   </td>
</tr>
</table>

Note that border-style will not appear without border-width set.

 Show me 

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

<td onclick="this.style.borderStyle='ridge'" ondblclick="this.style.borderStyle='solid'">
   <img src="../shared/images/samp05.jpg";>
</td>

 Show me 

border, border-color, border-width