CSS - border-color Property
The border-color property allows you to change the color of the border surrounding an element. You can individually change the color of the bottom, left, top and right sides of an element's border using the properties −
border-bottom-color changes the color of bottom border.
border-top-color changes the color of top border.
border-left-color changes the color of left border.
border-right-color changes the color of right border.
Possible Values
<color> − Any valid color value.
transparent − Sets the border to be invisible.
Applies to
All the HTML elements.
Syntax
object.style.borderColor = "red";
Always declare the border-style property before the border-color property.
CSS border-color - <color> Value
Here is the example which shows effect of all these properties −
<html> <head> <style> p.example1 { border:1px solid; border-bottom-color:#009900; /* Green */ border-top-color:#FF0000; /* Red */ border-left-color:#330000; /* Black */ border-right-color:#0000CC; /* Blue */ } p.example2 { border:1px solid; border-color:#009900; /* Green */ } </style> </head> <body> <p class = "example1"> This example is showing all borders in different colors. </p> <p class = "example2"> This example is showing all borders in green color only. </p> </body> </html>
CSS border-color - With Four Value
The border-color property can have four values, three values, two values or one value as demonstrated in the following example:
<html> <head> <style> p.example1 { border:4px solid; border-color:red blue green yellow; } p.example2 { border:4px solid; border-color:red blue green; } p.example3 { border:4px solid; border-color:alice aqua; } p.example4 { border:4px solid; border-color:red; } </style> </head> <body> <p class = "example1"> <i>border-color</i> with four different values. </p> <p class = "example2"> <i>border-color</i> with three different values. </p> <p class = "example3"> <i>border-color</i> with two different values. </p> <p class = "example4"> <i>border-color</i> with one value. </p> </body> </html>
CSS border-color - With Any Type of Color Value
We can pass any type of color value, from named colors to hexadecimal, RGB and RGBA values as demonstrated below −
<html> <head> <style > p { border-style: solid; border-width: thick; border-color: green rgb(201, 76, 76) #808080 rgba(201, 76, 76, 0.3); } </style> </head> <body> <p class = "example1"> <i>border-color</i> with four different color types (named, RGB ,hex, RGBA)!! </p> </body> </html>
To Continue Learning Please Login
Login with Google