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 | Value of color fitted by parameter color |
Inherited | No |
Applied | To all elements |
HTML analog | <img border > | <table border> |
Reference to specification | http://www.w3.org/TR/CSS21/box.html#border-color-properties |
Description
This parameter determines a border color at the bottom of an element.
Syntax
This parameter determines a border color at the bottom of an element.
Syntax
border-bottom-color: color
Arguments
You can specify a color by 3 means.
1. According to the name.
Browsers support some colors with the names.
2. Support with the hexadecimal denotation
For colors specifying it is used the numbers in hexadecimal code. This system unlike decimal is based on number 16. It uses next symbols: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Here you can see that numbers from 10 to 16 are changed by Latin letters. In the decimal denotation the numbers after 15 are formed by combination of 2 numbers into 1. For example, number 255 appropriates number FF in hexadecimal denotation. For avoiding misunderstandings to define accounting system, there is the symbol # before hexadecimal denotation, for example #666999. Each of three colors — red, green and dark blue — can take on values from 00 to FF. Thus, denotation of color is broken up on three constituents #rrggbb, where first 2 symbols mark red component of a color, 2 mediums do green and two last do – dark blue. It is assumed to use the brief form of kind #rgb, where every symbol is needed to double. So, it is necessary to consider record #fe0 as #ffee00.
3. With the help of RGB
It is possible to define a color using values of red, green and dark blue making in a decimal calculation. Value each of three colors can take on values from 0 to 255. It is also possible to set a color in a percentage ratio.
Example
You can specify a color by 3 means.
1. According to the name.
Browsers support some colors with the names.
2. Support with the hexadecimal denotation
For colors specifying it is used the numbers in hexadecimal code. This system unlike decimal is based on number 16. It uses next symbols: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Here you can see that numbers from 10 to 16 are changed by Latin letters. In the decimal denotation the numbers after 15 are formed by combination of 2 numbers into 1. For example, number 255 appropriates number FF in hexadecimal denotation. For avoiding misunderstandings to define accounting system, there is the symbol # before hexadecimal denotation, for example #666999. Each of three colors — red, green and dark blue — can take on values from 00 to FF. Thus, denotation of color is broken up on three constituents #rrggbb, where first 2 symbols mark red component of a color, 2 mediums do green and two last do – dark blue. It is assumed to use the brief form of kind #rgb, where every symbol is needed to double. So, it is necessary to consider record #fe0 as #ffee00.
3. With the help of RGB
It is possible to define a color using values of red, green and dark blue making in a decimal calculation. Value each of three colors can take on values from 0 to 255. It is also possible to set a color in a percentage ratio.
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 25 26 27 28 29 30 31 32 | <!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-bottom-color</title> <style type="text/css"> DIV#panel { background: #ccc; /* Background color */ } #panel P { padding: 5px; /* Add fields */ margin: 0; /* Remove indents of paragraph */ } #panel P#title { background: navy; /* Background color */ color: white; /* Text color */ border-bottom-width: 2px; /* Bottom lineweight */ border-bottom-style: solid; /* Bottom line style */ border-bottom-color: white; /* Bottom line color */ } </style> </head> <body> <div id="panel"> <p id="title">Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> </div> </body> </html> |
The result of this example is shown on the figure 1
Object model
[window.]document.getElementById("elementID").style.borderBottomColor