border-width

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value medium
Inherited No
Applied To all elements
HTML analog <img border > | <table border>
Reference to specification http://www.w3.org/TR/CSS21/box.html#border-width-properties

Description
With the help of this parameter it is possible to specify border thickness on every side of an element. You may also specify it for every page separately. Number of elements is depended on which device of thickness variation is selected.

Syntax

border-width: thin | medium | thick | value

Arguments
Thickness at the bottom of a page is specified by 3 variables. They are thin (2 pixels), medium (4 pixels) и thick (6 pixels). If you want to get more accurate value, you may specify thickness in pixels and other items. You are allowed to use from one to four values. It is necessary to part them by a blank. The effect depends on the amount of arguments given below.





Tab.1. Color changing depending on arguments' amount
Argument amount Result
1 Frame color will be set for all element's sides
2 The first argument sets the color of top and bottom sides and the second one for left and right sides
3 The first argument defined the color of the top side, the second one - left and right sides at the same time, the third one - for the bottom side
4 The color of top, bottom, right and left sides is set in turn



Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>border-width</title>
  <style type="text/css">
   P { 
    border-style: double; /* Frame style around the parameter */
    border-width: 3px 7px 7px 4px; /* Border weight */
    padding: 7px; /* Areas around the text */
   }
  </style>
 </head>
 <body> 
 
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.borderWidth