Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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 ToAll elements
Mediavisual
Inheritedno
Initial Valuemedium

Standards information

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


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


<td onclick="this.style.borderWidth='1cm'" 
  ondblclick="this.style.borderWidth='0.5cm'">


See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
Reference
border

 

 

Show:
© 2015 Microsoft