HTML | DOM Style borderColor Property
The DOM Style borderColor property specifies the color of the element’s border. It may be given explicitly, inherit from the parent or by default it will take the default value.
Syntax:
- To get the border color property:
object.style.borderColor
- To set the border color property:
object.style.borderColor = "color | transparent | initial | inherit"
Return value: It returns a string value which represents color of the border.
Property Values
- color: It specifies the border color of corresponding element. Black is default color.
- transparent: It sets the border color of corresponding element to transparent.
- inherit: When no value specified for this field, it is inherited from the parent of element. If there is no parent means this element is root then it takes initial(or default) value.
- initial: This keyword applies the initial(or default) value of a property to an element. The initial value should not be confused by the value specified by the browser’s style sheet. When borderColor sets to initial, It appears black(default) color.
Syntax:
borderColor: "red";
Program:
HTML
<!DOCTYPE html><html><head> <style> #GFG_Div { width: 200px; text-align: center; font-size: 20px; margin-left: 210px; margin-top: 20px; border: thick solid red; } </style></head><body align="center"> <button onclick="GFG_Function()"> Change border color </button> <div id="GFG_Div">GeeksforGeeks</div> <br> <script> function GFG_Function() { document.getElementById("GFG_Div") .style.borderColor = "green"; } </script></body></html> |
Output:
Before click on the button:
After click on button:
Syntax:
borderColor: "red green";
Program:
HTML
<!DOCTYPE html><html><head> <style> #GFG_Div { width: 200px; text-align: center; font-size: 20px; margin-left: 210px; margin-top: 20px; border: thick solid red; } </style></head><body align="center"> <button onclick="GFG_Function()"> Change border color </button> <div id="GFG_Div">GeeksforGeeks</div> <br> <script> function GFG_Function() { document.getElementById("GFG_Div") .style.borderColor = "red green"; } </script></body></html> |
Output:
Before click on the button:
After click on button:
Syntax:
borderColor: "red green blue";
Program:
HTML
<!DOCTYPE html><html><head> <style> #GFG_Div { width: 200px; text-align: center; font-size: 20px; margin-left: 210px; margin-top: 20px; border: thick solid red; } </style></head><body align="center"> <button onclick="GFG_Function()"> Change border color </button> <div id="GFG_Div">GeeksforGeeks</div> <br> <script> function GFG_Function() { document.getElementById("GFG_Div") .style.borderColor = "red green blue"; } </script></body></html> |
Output:
Before click on the button:
After click on button:
Syntax:
borderColor: "red green blue orange";
Program:
HTML
<!DOCTYPE html><html><head> <style> #GFG_Div { width: 200px; text-align: center; font-size: 20px; margin-left: 210px; margin-top: 20px; border: thick solid red; } </style></head><body align="center"> <button onclick="GFG_Function()"> Change border color </button> <div id="GFG_Div">GeeksforGeeks</div> <br> <script> function GFG_Function() { document.getElementById("GFG_Div") .style.borderColor = "red green blue orange"; } </script></body></html> |
Output:
Before click on the button:
After click on button:
Example: Here you will see the use of transparent It sets the border color of the corresponding element to transparent.
Syntax:
borderColor = "transparent"
Program:
HTML
<!DOCTYPE html><html><head> <style> #GFG_Div { width: 200px; text-align: center; font-size: 20px; margin-left: 210px; margin-top: 20px; border: thick solid red; } </style></head><body align="center"> <button onclick="GFG_Function()"> Transparent border color </button> <div id="GFG_Div">GeeksforGeeks</div> <br> <script> function GFG_Function() { document.getElementById("GFG_Div") .style.borderColor = "transparent"; } </script></body></html> |
Output:
Before click on the button:
After click on the button:
Supported Browsers: The browser supported by DOM Style borderColor property are listed below:
- Google Chrome 1.0
- Edge 12
- Internet Explorer 4.0
- Mozilla firefox 1.0
- Opera 3.5
- Safari 1.0
Please Login to comment...