HTML | DOM Style borderTopStyle Property
Last Updated :
09 Aug, 2022
The DOM Style borderTopStyle property is used to set or return the top border style of an element.
Syntax:
- To get the borderTopStyleProperty
object.style.borderTopStyle
- To set the borderTopStyleProperty
object.style.borderTopStyle = "none | hidden | dotted | dashed |
solid | double | groove |ridge | inset | outset | initial |
inherit"
Return Values: It returns a string value, which representing the style of an element’s top border.
Property Values:
| Value |
Effect |
| none |
No border is created. This is the default value. |
| hidden |
Visually same as ‘none’, except it helps during border conflict resolution in table elements. |
| dotted |
Dots are used as the border. |
| dashed |
A dashed line is used as the border. |
| solid |
A single solid line is used as the border. |
| double |
Two lines are used as the border. |
| groove |
A 3D grooved border is displayed. The effect depends on border-color value. |
| ridge |
A 3D ridged border is displayed. The effect depends on border-color value. |
| inset |
A 3D inset border is displayed. The effect depends on border-color value. |
| outset |
A 3D outset border is displayed. The effect depends on border-color value. |
| initial |
Sets the property to its initial value. |
| inherit |
Sets the property to inherit from its parent. |
These values are demonstrated with the below examples:
Example-1: Using the none value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style borderTopStyle Property
</title>
<style>
.item {
height: 50px;
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style borderTopStyle Property</b>
<p>Click on the button to change the
style of the border on the top</p>
<div class="item">
GeeksforGeeks
</div>
<button onclick="changeBorderTopStyle()">
Change style
</button>
<script>
function changeBorderTopStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderTopStyle = 'none';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-2: Using the hidden value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style borderTopStyle Property
</title>
<style>
.item {
height: 50px;
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderTopStyle Property</b>
<p>Click on the button to change the
style of the border on the top</p>
<div class="item">GeeksforGeeks</div>
<button onclick="changeBorderTopStyle()">
Change style
</button>
<script>
function changeBorderTopStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderTopStyle = 'hidden';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-3: Using the dotted value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style borderTopStyle Property
</title>
<style>
.item {
height: 50px;
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderTopStyle Property</b>
<p>Click on the button to change the
style of the border on the top</p>
<div class="item">GeeksforGeeks</div>
<button onclick="changeBorderTopStyle()">
Change style
</button>
<script>
function changeBorderTopStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderTopStyle = 'dotted';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-4: Using the dashed value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style borderTopStyle Property
</title>
<style>
.item {
height: 50px;
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderTopStyle Property</b>
<p>Click on the button to change the
style of the border on the top</p>
<div class="item">GeeksforGeeks</div>
<button onclick="changeBorderTopStyle()">
Change style
</button>
<script>
function changeBorderTopStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderTopStyle = 'dashed';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-5: Using the solid value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style borderTopStyle Property
</title>
<style>
.item {
height: 50px;
padding: 10px;
border: 15px dotted green;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderTopStyle Property</b>
<p>Click on the button to change the
style of the border on the top</p>
<div class="item">GeeksforGeeks</div>
<button onclick="changeBorderTopStyle()">
Change style
</button>
<script>
function changeBorderTopStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderTopStyle = 'solid';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-6: Using the double value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style borderTopStyle Property
</title>
<style>
.item {
height: 50px;
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderTopStyle Property</b>
<p>Click on the button to change the style
of the border on the top</p>
<div class="item">GeeksforGeeks</div>
<button onclick="changeBorderTopStyle()">
Change style
</button>
<script>
function changeBorderTopStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderTopStyle = 'double';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-7: Using the groove value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style borderTopStyle Property
</title>
<style>
.item {
height: 50px;
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderTopStyle Property</b>
<p>Click on the button to change the style
of the border on the top</p>
<div class="item">GeeksforGeeks</div>
<button onclick="changeBorderTopStyle()">
Change style
</button>
<script>
function changeBorderTopStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderTopStyle = 'groove';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-8: Using the ridge value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style borderTopStyle Property
</title>
<style>
.item {
height: 50px;
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderTopStyle Property</b>
<p>Click on the button to change the style
of the border on the top</p>
<div class="item">GeeksforGeeks</div>
<button onclick="changeBorderTopStyle()">
Change style
</button>
<script>
function changeBorderTopStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderTopStyle = 'ridge';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-9: Using the inset value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style borderTopStyle Property
</title>
<style>
.item {
height: 50px;
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderTopStyle Property</b>
<p>Click on the button to change the style
of the border on the top</p>
<div class="item">GeeksforGeeks</div>
<button onclick="changeBorderTopStyle()">
Change style
</button>
<script>
function changeBorderTopStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderTopStyle = 'inset';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-10: Using the outset value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style borderTopStyle Property
</title>
<style>
.item {
height: 50px;
padding: 10px;
border: 15px inset green;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderTopStyle Property</b>
<p>Click on the button to change the style
of the border on the top</p>
<div class="item">GeeksforGeeks</div>
<button onclick="changeBorderTopStyle()">
Change style
</button>
<script>
function changeBorderTopStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderTopStyle = 'outset';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-11: Using the initial value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style borderTopStyle Property
</title>
<style>
.item {
height: 50px;
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderTopStyle Property</b>
<p>Click on the button to change the style
of the border on the top</p>
<div class="item">GeeksforGeeks</div>
<button onclick="changeBorderTopStyle()">
Change style
</button>
<script>
function changeBorderTopStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderTopStyle = 'initial';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Example-12: Using the inherit value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DOM Style borderTopStyle Property
</title>
<style>
#parent {
border-top-style: dotted;
padding: 10px;
}
.item {
height: 50px;
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style borderTopStyle Property</b>
<p>Click on the button to change the style
of the border on the top</p>
<div id="parent">
<div class="item">GeeksforGeeks</div>
</div>
<button onclick="changeBorderTopStyle()">
Change style
</button>
<script>
function changeBorderTopStyle() {
elem = document.querySelector('.item');
// Setting the border style
elem.style.borderTopStyle = 'inherit';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by borderTopStyle property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 5.5
- Firefox 1
- Opera 9.2
- Apple Safari 1
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...