border-style

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 No
Inherited No
Applied To all elements
HTML analog <img border > | <table border>
Reference to specification http://www.w3.org/TR/CSS21/box.html#border-style-properties

Description
It determines a border style around an element. It is possible to determine certain styles for different sides of an element.

Syntax

border-style: style

Arguments
You can choose following 8 denotations of the parameter border-bottom-style for border type control. The border type depends on using browser and a table thickness. The table is given below indicates style names and borders with different denotations of thickness.


It is allowed to use one, two, three or four values, dividing them between each other by a blank. An effect depends on the amount of arguments and indicated in the table 2.





Tab.2. 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
<!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-style</title>
  <style type="text/css">
   P { 
    border-style: double; /* Style of lines around the paragraph */
    padding: 5px; /* 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.borderStyle