border-width Attribute | borderWidth Property

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

Syntax

HTML { border-width: [ "medium" | "thin" | "thick" | length ] {1,4}}

Scripting object.style.borderWidth [ = sWidth ]

HTML	{ border-width: [ "medium" \| "thin" \| "thick" \| length ] {1,4}}
Scripting	object.style.borderWidth [ = sWidth ]

Possible Values

medium Default width.

thin Width less than the default.

thick Width greater than the default.

length Floating-point number and 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.

Remarks

"{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.

Example

The following examples demonstrate use of both the border-width attribute and the borderWidth property to specify the border's width.
The sample below uses a call to an embedded (global) style sheet to change the border's width to 1 centimeter on a mouse click.
Sample Code
<STYLE>
    TD { border-width:"3mm" }
    .changeborder1 { border-width:"1cm" }
</STYLE>
</HEAD>
<BODY> 
<TABLE BORDER>
<TR>
    <TD onclick="this.className='changeborder1'"
        ondblclick="this.className=''">
        <IMG src="sphere.jpeg"></TD>
</TR>
</TABLE>
This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

The sample below uses inline script to change the border's width to 1 centimeter on a mouse click.
<TD onclick="this.style.borderWidth='1cm'">
This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Applies To

BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, currentStyle, DD, DIR, DIV, DL, DT, EMBED, FIELDSET, FORM, Hn, HR, HTMLAREA, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PLAINTEXT, PRE, runtimeStyle, SPAN, style, TABLE, TD, TEXTAREA, TH, UL, XMP

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


BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, currentStyle, DD, DIR, DIV, DL, DT, EMBED, FIELDSET, FORM, Hn, HR, HTMLAREA, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PLAINTEXT, PRE, runtimeStyle, SPAN, style, TABLE, TD, TEXTAREA, TH, UL, XMP