The CSS border-color property is used to specify a border color for elements. We can also set color for individual sides using border-top-color, border-right-color, border-left-color and border-right-color properties.
Syntax
The syntax of CSS border-color property is as follows −
Selector { border-color: /*value*/ }
The following examples illustrate CSS border-color property −
Example
<!DOCTYPE html> <html> <head> <style> span { margin: 10px; padding: 20px; border-style: solid; border-color: limegreen lightblue crimson; } div { text-align: center; border-style: solid; border-color: palevioletred steelblue; height: 16px; } </style> </head> <body> <h2>Demo Heading</h2> <div>Demo</div> <p><span>This</span>is demo text just for displaying how CSS styles works.</p> </body> </html>
Output
This gives the following output −
Example
<!DOCTYPE html> <html> <head> <style> li { border-bottom-color: cyan; border-bottom-style: dotted; width: 300px; } p { text-align: center; border-width: 8px; border-style: solid; border-color: #d11c74; border-left-style: ridge; } </style> </head> <body> <h2>Accessories</h2> <p>Displaying the car accessories</p> <ul> <li>Mud Flap</li> <li>Car Freshener</li> <li>Mobile Holder</li> <li>Bluetooth</li> <li>Wheel Lock</li> </ul> </body> </html>
Output
This gives the following output −