Export (0) Print
Expand All

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.

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


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


See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
Reference
border
Other Resources
CSS Enhancements in Internet Explorer 6

 

 

Show:
© 2014 Microsoft