How to set the style of the top border with JavaScript?


In this tutorial, we shall learn to set the style of the top border with JavaScript. To set the style of the top border in JavaScript, use the borderTopStyle property. Set the style of the top border using this property.

Let us discuss the property available in JavaScript to achieve this in brief.

Using the borderTopStyle Property

With the Style borderTopStyle property, we can set or return the style of the top border of an element.

Syntax

Following is the syntax to set the style of the top border using the borderTopStyle property in JavaScript −

object.style.borderTopStyle = value;

Here we set the style of the top border of the object to "value".

We will see the available value values below −

  • none − Sets no border.
  • hidden − Similar to "none". Unique to table element border issues.
  • dotted − Sets a dotted border.
  • dashed − Sets a dashed border.
  • solid − Sets a solid border.
  • double − Sets two borders. The total width is equal to the border width.
  • groove − Sets a 3-D grooved border. The effect is dependent on the color.
  • ridge − Sets a 3-D ridged border. The effect is dependent on the color.
  • inset − Sets a 3-D inset border. The effect is dependent on the color.
  • outset − Sets a 3-D outset border. The effect is dependent on the color.
  • initial − Sets this property to the default value.
  • inherit − Inherits this property from its parent element.

The default value of the given property is none. The return value is a string representing the border-top style.

Example 1

You can try to run the following code to learn how to set the style of the top border with JavaScript.

<!DOCTYPE html> <html> <head> <style> #box { border: thick solid gray; width: 500px; height: 300px; } </style> </head> <body> <div id="box">Demo Text</div> <br> <p> Click the "Change top border style" button to change the style of top border to "dashed".</p> <br> <button type="button" onclick="display()">Change top border style</button> <script> function display() { document.getElementById("box").style.borderTopStyle = "dashed"; } </script> </body> </html>

Example 2

In this program, we are setting different top border styles to multiple div elements

When the user press on the button, we call the function to set the top border style following the syntax given above.

<html> <head> <style> .topBordrEl{ background-color: #FFFFFF; height: 150px; width: 140px; padding-top: 35px; padding-top: 5px; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-top-width: 10px; border-left-width: 1px; border-color: #4B0082; text-align: center; float: left; } #topBordrBtnWrap{ margin-top: 10px; float: left; } </style> </head> <body> <h3> Set the style of the top border using the <i> borderTopStyle </i>property.</h3> <div class = "topBordrEl" id = "topBordrEl1">Top 1</div> <div class = "topBordrEl" id = "topBordrEl2">Top 2</div> <div class = "topBordrEl" id = "topBordrEl3">Top 3</div> <div class = "topBordrEl" id = "topBordrEl4">Top 4</div> <br> <div id = "topBordrBtnWrap"> <p> Click on the button to set different styles to the top border. </p> <button onclick = "setTopBorderStyle();"> Set </button> </div> <br> </body> <script> function setTopBorderStyle(){ var topBordrBtnWrap = document.getElementById("topBordrBtnWrap"); // topBordrBtnWrap.style.display = "none"; var topBordrEl1 = document.getElementById("topBordrEl1"); var topBordrEl2 = document.getElementById("topBordrEl2"); var topBordrEl3 = document.getElementById("topBordrEl3"); var topBordrEl4 = document.getElementById("topBordrEl4"); topBordrEl1.style.borderTopStyle = "dashed"; topBordrEl2.style.borderTopStyle = "solid"; topBordrEl3.style.borderTopStyle = "dotted"; topBordrEl4.style.borderTopStyle = "double"; topBordrEl1.innerHTML = "<b> dashed </b>"; topBordrEl2.innerHTML = "<b> solid </b>"; topBordrEl3.innerHTML = "<b> dotted </b>"; topBordrEl4.innerHTML = "<b> double </b>"; } </script> </html>

Example 3

In this program, we are setting the top border style to a single div element. We get the top border style from the user.

When the user press on the button, we call the function to set the top border style following the syntax given above.

<html> <head> <style> #topBordrUsrEl{ background-color: #FFFFFF; border-style: solid; border-width: 5px; border-color: #BDB76B; text-align: center; height: 150px; width: 500px; } </style> </head> <body> <h3> Set the style of the top border using the <i> borderTopStyle </i> property.</h3> <div id = "topBordrUsrEl"> Set the top border style here. </div> <br> <div id = "topBordrUsrBtnWrap"> <select id = "topBordrUsrSel" size = "1"> <option/> dotted <option/> dashed <option/> double <option/> groove <option/> inset <option/> none <option/> hidden <option/> outset <option/> ridge <option selected = "selected"/> solid <option/> inset <option/> outset </select> <br><br> <p> Provide the border-top style and click on the button. </p> <button onclick = "setTopBorderStyle();"> Set </button> </div> <br> </body> <script> function setTopBorderStyle(){ var topBordrUsrSelTag = document.getElementById("topBordrUsrSel"); var topBordrUsrSelIndx = topBordrUsrSelTag.selectedIndex; var topBordrUsrSelStat = topBordrUsrSelTag.options[topBordrUsrSelIndx].text; var topBordrUsrBtnWrap = document.getElementById("topBordrUsrBtnWrap"); // topBordrUsrBtnWrap.style.display = "none"; var topBordrUsrEl = document.getElementById("topBordrUsrEl"); topBordrUsrEl.style.borderTopStyle = topBordrUsrSelStat; topBordrUsrEl.innerHTML="You have set the top border style to <b>" + topBordrUsrEl.style.borderTopStyle + "</b>"; } </script> </html>

In this tutorial, we went through the borderTopStyle property in JavaScript. The borderTopStyle property is a built-in option in JavaScript to set the style of the top border and is very easy to code.

Updated on: 12-Oct-2022

214 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements