How to set the image to be used as a border with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to set the image to be used as a border with JavaScript.

The outline of an HTML element is called the border. The ‘border-image’ CSS property is used to set an image as the border around an element. It is a shorthand property for: border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat.

To set the image to be used as a border with JavaScript we have different ways −

Using the style.borderImage Property
Using the style.setProperty Method

Using the style.borderImage Property

An element's style.borderImage property specifies an image that will be used for the border. The style.borderImage property is available on the element object of an element. First, we must use the document.getElementById() method to obtain the element's element object. Second, we should set a border image using the style.borderImage property.

Syntax

document.getElementById('id').style.borderImage = border-image-source border-image-slice border-image-width border-image-outset border-image-repeat | inherit | initial

In the above syntax, the ‘id’ is the id attribute of an element. The document.getElementById() method is used to access the element object, and then we set the border image using the style.borderImage property.

Parameters

border-image-source − The path or URL of the border image.
border-image-slice − Specifies how the border image should be sliced.
border-image-width − The width of the border image.
border-image-outset − The amount of border image area that should extend the border box.
border-image-repeat − The repetition of the border image.
inherit − The border image is inherited from its parent element’s property.
initial − The border image is set to default.

Example

In the below example, we have used the style.borderImage property to set the image to be used as a border with JavaScript. We have used the "setBorderImage()" function, which sets a border image for multiple elements with a different value, in response to the button click event “Set Border Image.”


<html>
<head>
   <style>
      div {
         padding: 15px;
         margin: 5px 0px;
         border: 20px solid transparent;
         background-color: rgb(236, 236, 236);
      }
   </style>
</head>
<body>
   <h2> Set the image to be used as a border using <i> style.borderImage property </i> with JavaScript </h2>
   <button onclick="setBorderImage()"> Set Border Image </button>
   <div id="element1"> This is element 1 </div>
   <div id="element2"> This is element 2 </div>
   <div id="element3"> This is element 3 </div>
   <div id="element4"> This is element 4 </div>
   <script>
      
      // all elements
      const element1 = document.getElementById('element1')
      const element2 = document.getElementById('element2')
      const element3 = document.getElementById('element3')
      const element4 = document.getElementById('element4')
      
      // 'Set Border Image' button click event handler function
      function setBorderImage() {
         
         // set the border image of an element using the style.borderImage property
         element1.style.borderImage = "url('https://www.tutorialspoint.com/images/neo4j.png')"
         element2.style.borderImage = "url('https://www.tutorialspoint.com/images/neo4j.png') 40% 30% stretch"
         element3.style.borderImage = "url('https://www.tutorialspoint.com/images/neo4j.png') 40% 30% round"
         element4.style.borderImage = "url('https://www.tutorialspoint.com/images/neo4j.png') 15% 10% 20% round"
      }
   </script>
</body>
</html>

Using the style.setProperty Method

In JavaScript, an element’s property, whether it is new or already exists, is set using the style.setProperty method. The border image of an element can also be set using this method. The element object is accessed using the document.getElementById() method, and the ‘border-image’ property is then set using the setProperty method. The property name parameter of the style.setProperty method should be ‘border-image’, and the value and priority will be as per the user’s requirement.

Syntax

document.getElementById('id').style.setProperty(property_name, value, priority)

In the above syntax, the document.getElementById() method is used to access the element object that has the id attribute set as ‘id’, and then on that element object, we use the style.setProperty method.

Parameters

property_name − The name of the property to be set.
value − The new value of the property.
priority − The priority of the property value (optional).

Example

In the below example, we have used the style.setProperty method to set the image to be used as a border with JavaScript. We have used five input fields to take the user’s input for four properties of border-image: border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat. A button “Set Border Image” is associated with a click event that executes the “setBorderImage()” function, which sets the border image of an element.


<html>
<head>
   <style>
      #root {
         padding: 15px;
         margin: 5px 0px;
         border: 20px solid transparent;
         background-color: rgb(236, 236, 236);
      }
      label {
         margin-right: 5px;
         font-weight: bold;
      }
      .input-field {
         margin-bottom: 5px;
      }
   </style>
</head>
<body>
   <h2>Set the image to be used as a border using <i> style.setProperty method </i> with JavaScript</h2>
   <h4>Enter the properties of border-image:</h4>
   <div>
      <div class="input-field">
         <label for="border-image-source">border-image-source:</label>
         <input id="border-image-source" type="text" name="border-image-source" value="https://www.tutorialspoint.com/images/neo4j.png">
      </div>
      <div class="input-field">
         <label for="border-image-slice">border-image-slice:</label>
         <input id="border-image-slice" type="text" name="border-image-slice" value="30">
      </div>
      <div class="input-field">
         <label for="border-image-width">border-image-width:</label>
         <input id="border-image-width" type="text" name="border-image-width" value="10%">
      </div>
      <div class="input-field">
         <label for="border-image-outset">border-image-outset:</label>
         <input id="border-image-outset" type="text" name="border-image-outset" value="30">
      </div>
      <div class="input-field">
         <label for="border-image-repeat">border-image-repeat:</label>
         <input id="border-image-repeat" type="text" name="border-image-repeat" value="round">
      </div>
   </div>
   <button onclick="setBorderImage()">Set Border Image</button>
   <div id="root">This element's border image is sets according to input fields value!</div>
   <script>
      function setBorderImage() {
         const root = document.getElementById('root')
         
         // All input fields' value
         const border_image_source = document.getElementById('border-image-source').value
         const border_image_slice = document.getElementById('border-image-slice').value
         const border_image_width = document.getElementById('border-image-width').value
         const border_image_outset = document.getElementById('border-image-outset').value
         const border_image_repeat = document.getElementById('border-image-repeat').value
         
         // set the border image of a element
         root.style.setProperty('border-image', 'url(' + border_image_source + ') ' + border_image_slice + ' ' + border_image_width + ' ' + border_image_outset + ' ' + border_image_repeat)
      }
   </script>
</body>
</html>

In this tutorial, we discussed two approaches to set the four transition properties with JavaScript. The first approach is to use the style.borderImage property and the other is to use the style.setProperty() method.