HTML | DOM Style borderTopStyle Property
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"> w3wiki </ 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"> w3wiki </ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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">w3wiki</ 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