To set the width of an element’s border in JavaScript, use the borderWidth property. Set the width using this property. You can try to run the following code to learn how to set the width of an element’s border − Example Live Demo #box { border: thick solid gray; width: 300px; height: 200px } Demo Text Change border width function display() { document.getElementById("box").style.borderWidth = "thin"; }

To set all the border top properties in a single declaration, use the borderTop property. With this property, you can set the border-top-width, border-top-style, and border-top-color property.ExampleYou can try to run the following code to learn how to work with border-top properties in JavaScript −Live Demo                    #box {             border: thick solid gray;             width: 300px;             height: 200px          }                     Demo Text             Change top border                function display() {             document.getElementById("box").style.borderTop = "thick solid #000000";          }          

To set all the border right properties in JavaScript, use the borderRight property. Set the border color, style, and, width at once using this property.ExampleYou can try to run the following code to learn how to set all the border right properties at once −Live Demo                    #box {             border: thick solid gray;             width: 300px;             height: 200px          }                     Demo Text             Change right border                function display() {             document.getElementById("box").style.borderRight = "thick solid #000000";          }          

To set all the border-radius properties in JavaScript, use the borderRadius property. Set the border-radius properties at once using this.ExampleYou can try to run the following code to learn how to set all the four border-radius properties −Live Demo                    #box {             border: thick solid gray;             width: 200px;             height: 200px          }                     Demo Text             Add border radius                function display() {             document.getElementById("box").style.borderRadius = "20px";          }          

To set the style of the bottom border, use the JavaScript borderBottomStyle property. It allows you to add a bottom border.ExampleYou can try to run the following code to set the style of the bottom border −           Demo Text             Click to set style of bottom border                function display() {             document.getElementById("box").style.borderBottomStyle = "dashed";          }          

In this tutorial, we will learn how to set the positioning area of the background image using JavaScript The background image’s positioning area in a program can be changed using the HTML DOM Style background-origin property. Background-origin is a feature that allows you to modify the background images of a webpage. The origin of the picture in the background is set using this property. The background image origin is set to the upper-left corner of the screen/webpage by default. The background-origin property specifies the origin of the background: from the border start, within the border, or the padding. When the ... Read More

To set all the border left properties in a single declaration, use the borderLeft property. You can try to run the following code to learn how to set the border left properties − Example Live Demo #box { border: thick solid gray; width: 300px; height: 200px } Demo Text Change left border function display() { document.getElementById("box").style.borderLeft = "thick solid #000000"; }

In this tutorial, we shall learn to set the width of the bottom border with JavaScript. To set the width of the bottom border, we can use the borderBottomWidth property in JavaScript. It allows you to change the width. Let us discuss our topic in brief. Using the borderBottomWidth Property With this property, we can set or return the width of an element's bottom border. Width is a floating point number with either a relative units designator (cm, mm, in, pt, or pc) or an absolute units designator (em, ex, or px). Syntax Following is the syntax to set the ... Read More

In this tutorial, we will look at the method to set the size of a background image with JavaScript. Background effects on a webpage enhance its look. We can set a background color or a background image to enhance the feel of the webpage. We can also change the background properties, like its size or color. To enhance the feel, the image must fit in the right position with the right size. Generally, we do this by using CSS, but JavaScript DOM also provides properties to do so. So, let us look at how to set the size of the ... Read More

To set the border width, style, and color in a single declaration, use the border property in JavaScript.ExampleYou can try to run the following code to learn how to set border in JavaScript −Live Demo           Set border                Demo Text          Demo Text                      function display() {             document.getElementById("box").style.border = "thick dashed #000000";          }