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 that represents the color of the border.
Property Values
- color: It specifies the border color of the corresponding element. Black is the default color.
- transparent: It sets the border color of the corresponding element to transparent.
- inherit: When no value is specified for this field, it is inherited from the parent of the element. If there is no parent means this element is root then it takes the 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 with the value specified by the browser’s style sheet. When borderColor sets to initial, It appears as black(default) color.
Syntax:
borderColor: "red";
Example: In this example, we will change the border color.
<!DOCTYPE html><html>
<head>
<style>
#GFG_Div {
width: 200px;
font-size: 20px;
margin-top: 20px;
border: thick solid red;
}
</style>
</head>
<body>
<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:
Example: In this example, we will change the border color.
<!DOCTYPE html><html>
<head>
<style>
#GFG_Div {
width: 200px;
font-size: 20px;
margin-top: 20px;
border: thick solid red;
}
</style>
</head>
<body>
<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:
Example: In this example, we will change the border color.
<!DOCTYPE html><html>
<head>
<style>
#GFG_Div {
width: 200px;
font-size: 20px;
margin-top: 20px;
border: thick solid red;
}
</style>
</head>
<body>
<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:
Example: In this example, we will change the border color.
<!DOCTYPE html><html>
<head>
<style>
#GFG_Div {
width: 200px;
font-size: 20px;
margin-top: 20px;
border: thick solid red;
}
</style>
</head>
<body>
<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:
Example: Here you will see the use of transparent It sets the border color of the corresponding element to transparent.
<!DOCTYPE html><html>
<head>
<style>
#GFG_Div {
width: 200px;
font-size: 20px;
margin-top: 20px;
border: thick solid red;
}
</style>
</head>
<body>
<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:
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