border-width property

Specifies the thicknesses of the left, right, top, and bottom borders of an object.

CSS Backgrounds and Borders Module Level 3, Section 4.3

Syntax

border-width: [ medium | thin | thick | <width> ] {1,4}

Property values

One to four of the following values:

medium: Initial value. The default thickness.
thin: Less than the default thickness.
thick: Greater than the default thickness.
width: Thickness specified by a floating-point number, followed by a supported length unit.

CSS information

Applies To	All elements
Media	visual
Inherited	no
Initial Value	medium

Standards information

CSS Backgrounds and Borders Module Level 3, Section 4.3

Remarks

Up to four different thicknesses can be specified, in the following order: top, right, bottom, left.

If one width is specified, it is used for all four sides.
If two widths are specified, the first is used for the top and bottom borders, and the second is used for left and right borders.
If three widths are specified, they are used for top, right/left, and bottom borders, respectively.

The border does not render if the border-style property is set to none, or if border-width is set to "0".

Examples

The following examples use the border-width CSS property and the borderWidth scripting property to specify the width of the border.

This example uses a call to an embedded (global) style sheet to change the width of the border to 1 centimeter when a mouse click occurs.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/border-width.htm

HTML


<head>
<style type="text/css">
td {
  border-width: 3mm;
  border-color: gray;
  border-style: solid;
}
.changeborder1 {
  border-width: 1cm;
  border-color: gray;
  border-style: solid;
}
</style>
</head>
<body> 
<table>
<tr>
    <td onclick="this.className='changeborder1'"
        ondblclick="this.className=''">
        <img src="sphere.jpg"></td>
</tr>
</table>

This example uses inline script to change the width of the border to 1 centimeter when a mouse click occurs.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/borderWidth.htm