Change the color of the four borders of a <div> element to red:
document.getElementById("myDiv").style.borderColor = "red";
<!DOCTYPE html> <html> <head> <style> #myDiv {//from ww w .ja v a 2s . c om border: thick solid blue; } </style> </head> <body> <div id="myDiv">This is a div.</div> <br> <button type="button" onclick="myFunction()">Change color of the four borders</button> <script> function myFunction() { document.getElementById("myDiv").style.borderColor = "red"; } </script> </body> </html>
The borderColor property sets or gets the color of an element's border.
This property can take from one to four values:
Value Number | Example | Description |
---|---|---|
One value | p {border-color: red} | all four borders will be red |
Two values | p {border-color: red transparent} | top and bottom border will be red, left and right border will be transparent |
Three values | p {border-color: red green blue} | top border will be red, left and right border will be green, bottom border will be blue |
Four values | p {border-color: red green blue yellow} | top border will be red, right border will be green, bottom border will be blue, left border will be yellow |
Property Values
Value | Description |
---|---|
color | Sets the color of the border. Default color is black |
transparent | The color of the border is transparent. |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |
The borderColor property returns a String, representing the color of an element's border.