CSS Attributes Index   Box Attributes

---

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

CSS	{ border-width: [ 'medium' | 'thin' | 'thick' | length ] {1,4}}
Script	object.style.borderWidth = sWidth ]

medium	Default width.
thin	Width less than the default.
thick	Width greater than the default.
length	Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ).

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

"{1,4}" in the HTML syntax indicates that up to four different widths may be specified in this order: top, right, bottom, left. If one width is supplied, it is used for all four sides. If two widths are supplied, the first is used for the top and bottom borders, and the second is used for left and right borders. If three widths are supplied, they are used for top, right and left, and bottom borders, respectively.

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

The property is supported on block and replaced objects only.

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

 Show me 

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

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

<style>
   td { border-width: 3mm }
   .thick { border-width: 6mm }
</style>
...
<table>
<tr>
   <td onmouseover="this.className='thick'" onmouseout="this.className=''">
      <img src="../shared/images/sample.jpg">
   </td>
</tr>
</table>

 Show me 

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

<td onclick="this.style.borderWidth='15pt'"
   ondblclick="this.style.borderWidth='10pt'">
      <img src="../shared/images/samp08.jpg">
</td>

 Show me 

border, border-color, border-style