Quick Reach
The border-color property of CSS
With the border-color property, you can set the border color of one or all four borders of the specified element. A simple example of using the border color CSS property is:
border-color: blue;
>>See an example to use border color property
The border color value can be set by using:
- Hexadecimal value
- Color name: e.g red, green, yellow etc.
- RGB value
Example of setting border color of Div
In this example, four border styles are given different values for the top, left, right and bottom borders. Whereas, CSS border-color is given the single color name, blue. You can see all borders (top, bottom, left and right) will take the same color.
Note that, the border-style must be specified in order to make border-color property work.
Experience this example online
|
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
33
34
35
36
37
38
39
40
41
|
<html>
<head>
<style>
/*Using CSS border*/
.div_ex
{
border-style: solid dotted dashed double;
border-color: blue;
border-width: 5px;
}
</style>
</head>
<body>
<div>This is Div element with top, bottom, left and right border specification
<br />
This is Div element with top, bottom, left and right border specification
<br />
This is Div element with top, bottom, left and right border specification
</div>
</body>
</html>
|
Border color of div with four values
In this example, four borders are specified and four color values are assigned to the border-color property. The order of color to each border will be:
- Top = blue
- Right = red
- Bottom = green
- Left = yellow
Experience this example online
|
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
33
34
35
36
37
38
39
40
41
|
<html>
<head>
<style>
/*Using CSS border*/
.div_ex
{
border-style: solid dotted dashed double;
border-color: blue red green yellow;
border-width: 5px;
}
</style>
</head>
<body>
<div>This is Div element with top, bottom, left and right border specification
<br />
This is Div element with top, bottom, left and right border specification
<br />
This is Div element with top, bottom, left and right border specification
</div>
</body>
</html>
|
Example of setting border-color with each border’s property
As such each border can be specified by using its own set of properties, like border-right, border-left etc. Each border has its own color property as well e.g border-right-color.
This example demonstrates how to specify each border color by its property.
Note, this example also uses different color values for different borders.
Experience this example online
|
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<html>
<head>
<style>
/*Using CSS border*/
.div_ex
{
border-top-style: solid;
border-top-color: blue;
border-right-style: dotted;
border-right-color:#FF0000;
border-bottom-style: dashed;
border-bottom-color: #008000;
border-left-style: double;
border-left-color: rgb(255,255,0);
border-width: 5px;
}
</style>
</head>
<body>
<div>This is Div element with top, bottom, left and right border specification
<br />
This is Div element with top, bottom, left and right border specification
<br />
This is Div element with top, bottom, left and right border specification
</div>
</body>
</html>
|
Further Reading: CSS table border
Leave A Comment?