CSS border-color
Description
The border-color property is a short-hand command to define the border colors of all sides an html element. Each side can have a different color.
No default
Note: You have to set the border-style as well otherwise the border will not show because border-style defaults to none.
Set the border color for all sides of an element:
border-color: color; /* e.g. border-color: blue; */
border-color: #rrggbb; /* e.g. border-color: #0000FF; */
border-color: rgb(n, n, n); /* e.g. border-color: rgb(0,0,255); */
border-color: transparent;
border-color: inherit;
Set different border colors for individual sides of an html element:
border-color: color color color color;
border-color: #rrggbb #rrggbb #rrggbb #rrggbb;
border-color: rgb(n,n,n) rgb(n,n,n) rgb(n,n,n) rgb(n,n,n);
See also: border-top-color, border-bottom-color, border-left-color, border-right-color.
Examples for Border
Example 1:
This is the most straightforward example, all borders the same collow of blue.
test text test text test text test text
<style>
#test { border-style: solid; border-color: blue; }
</style>
<div id="test">test text test text test text test text</div>
Example 2:
This example shows different colors set for each border. I use the different types of color values you can use
to show that css does not care which one you use - they can be all the same or all different.
test text test text test text test text
<style>
#test2 { border-color: red #0000ff rgb(0,255,0) yellow; border-style: solid; }
</style>
<div id="test2">test text test text test text test text</div>
Values for Border
| border-color |
color e.g. yellow
#rrggbb e.g. #ff0000
rgb(0-255,0-255,0-255) e.g. rgb(255,0,0)
Or can use different values for each border:
color color color color e.g. blue red green yellow
transparent
inherit |
Set the color of the whole border of an html element. Can specify one color for all borders or different colors for each side of the html element. |
| border-left-color |
color e.g. yellow
#rrggbb e.g. #ff0000
rgb(0-255,0-255,0-255) e.g. rgb(255,0,0)
transparent
inherit |
Specifies the color of the left border. |
| border-right-color |
color e.g. yellow
#rrggbb e.g. #ff0000
rgb(0-255,0-255,0-255) e.g. rgb(255,0,0)
transparent
inherit |
Specifies the color of the right border. |
| border-top-color |
color e.g. yellow
#rrggbb e.g. #ff0000
rgb(0-255,0-255,0-255) e.g. rgb(255,0,0)
transparent
inherit |
Specifies the color of the left border. |
| border-bottom-color |
color e.g. yellow
#rrggbb e.g. #ff0000
rgb(0-255,0-255,0-255) e.g. rgb(255,0,0)
transparent
inherit |
Specifies the color of the left border. |