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?