Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style borderTopColor Property
The HTML DOM borderTopColor property is used to get or set the color for top border of an element.
Following is the syntax for −
Setting the borderTopColor property −
object.style.borderTopColor = "color|transparent|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| color | For specifying the Top border color. Its default color is set to black. |
| transparent | The makes the Top border color transparent and the underlying content can be seen. |
| initial | For setting this property to default value. |
| inherit | To inherit the parent property value. |
Let us look at an example for the borderTopColor property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#IMG1 {
border-top:solid 8px;
border-top-color: orange;
}
</style>
<script>
function changeBorderTop(){
document.getElementById("IMG1").style.borderTopColor="blue";
document.getElementById("Sample").innerHTML="The border top color is now changed to blue";
}
</script>
</head>
<body>
<img id="IMG1" src="https://www.tutorialspoint.com/blue_prism/images/blueprism-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150">
<p>Change the above image border top color by clicking the below button</p>
<button onclick="changeBorderTop()">Change Border Color</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Border Color” button −
In the above example −
We have created an image element with id “IMG1” that has a css style applied to it. The css style specify the border top style and the border top color.
#IMG1 {
border-top:solid 8px;
border-top-color: orange;
}
<img id="IMG1" src="https://www.tutorialspoint.com/blue_prism/images/blueprism-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150
">We then created a button named “Change Border Color” that will execute changeBorderTop() method on being clicked by the user −
<button onclick="changeBorderTop()">Change Border Color</button>
The changeBorderTop() method gets the <img> element with id “IMG1” by using the getElementById() method and sets its borderTopColor style property to blue. This changes the top border color to blue and displays this change in the paragraph with id “Sample” using its innerHTML property −
function changeBorderTop(){
document.getElementById("IMG1").style.borderTopColor="blue";
document.getElementById("Sample").innerHTML="The border top color is now changed to blue";
}
21 Views
