Windows apps
Collapse the table of content
Expand the table of content
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.

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:
© 2017 Microsoft