border-left

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

Description
With the help of this parameter you can determine thickness, style and color of left border of an element. Values can be in any order and they are divided by a blank. A browser can define which of them corresponds to the necessary attribute.

Syntax

border-left: border-width || border-style || color

Arguments
There are 8 values of this parameter which command borders types. They are given below.


The first two ones (dotted and dashed) are supported by Internet Explorer, version 5.5.
Argument color determines a border color and the denotation may be in any valid format for CSS.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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-left</title>
  <style type="text/css">
   DIV.line {
    border-left: 2px dotted green; /* Line left from the text */
    padding-left: 10px; /* Distance between the line and the text */
    margin-left: 10px; /* Distance from the left margin to the line */
   }
  </style>
 </head>
 <body> 
 
  <div class="line">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
   volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution 
   ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  </div>
 
 </body>
</html>
The result of this example is shown on the figure 2


Object model

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