How to set whether the image-border should be repeated, rounded or stretched with JavaScript?

This tutorial will teach us to set whether the border image should be repeated, rounded, or stretched with JavaScript. Use the borderImageRepeat property to set whether the image-border is to be repeated, rounded, or stretched.

Borders are used to decorate or focus an element. You can define its width, color, and type of border. Various styles can be applied to the borders. But, these borders are without any special effects or any other designs.

Using the border-image property, we can set an image as a border of an element. It does not look like a line. It will be an image we have chosen as a border. The border-image is a CSS property that sets an image as a border. This can also be done using the borderImage style property of JavaScript DOM.

There are also multiple properties to style the border image. You can make the border images repeated, rounded, or stretched using the JavaScript style named borderImageRepeat property.

So, let us look at how to set whether the border image should be repeated, rounded, or stretched with JavaScript.

Following is the property by which we can set whether the image border should be repeated, rounded, or stretched −

  • Using borderImageRepeat Property
  • Using the borderImage Property

Using the borderImageRepeat Property of DOM

There are different images with different dimensions. So, they will not fit within the width of a border. The borderImageRepeat used to set the border image should be repeated, rounded, or stretched. Using this property, we can define whether the image can repeat or fill the entire area by stretching.

Users can follow the syntax below to set the border image repeat with JavaScript.

Syntax

var element = document.getElementById(" <Id here> ");
element.style.borderImageRepeat = "stretch|repeat|round|initial | inherit"

You can follow the above syntax to set the borderImageRepeat property.

Parameters

  • stretch − Stretch the image to fill the entire border area.
  • repeat − Repeat the images for all available space.
  • round − Repeat the images and resize the images to fill the area.
  • initial − Set to a default value.
  • inherit − Inherit from its parent.

Example

In the following example, we have used the borderImageRepeat property to add an image as a border of an element. We have used a round value to fill the area with the image and rescale it.

<!DOCTYPE html>
<html>
<head>
   <style>
      div{
         background-color: blue;
         border: 30px solid;
         border-image:
         url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg');
         border-image-slice: 10 10 30 30;
         border-image-width: 1 1 1 1;
         border-image-repeat: stretch;
      }
   </style>
</head>
<body>
   <div id="box">
      <p>
      Demo Text!
      </p>
      <p>
      Demo Text!
      </p>
      <p>
      Demo Text!
      </p>
   </div>
   <button onclick="display()">Click me!</button>
   <script>
      function display() {
         document.getElementById("box").style.borderImageRepeat =
         "round";
      }
   </script>
</body>
</html>

In the above example, users can see that we have used the borderImageRepeat property to set the image as a border of an element with JavaScript.

Using the borderImage Property of DOM

We will declare the border with a width, and then the image will be added inside the width of the border. But, the dimensions of the images are different, so they will not be fitted accurately to the border. We can keep it off the actual size, stretch it to be fitted, or repeat it until fitting in the border.

The borderImage Property is a shorthand with properties to use border images and style them. It contains properties like a source of an image, the width of an image, the outset of border image and repetition of images, etc.

We can use the borderImage property to set an image as a border. Users can follow the syntax below to use the borderImage property in JavaScript.

Syntax

var element = document.getElementById("<Element id here>");
element.style.border = " <Enter values> ";
element.style.borderImage = " <Image_source> <border_slice>
<border_width> <border_outset> <repeat||initial||inherit>";

Following the above syntax, you can set the image to the border with JavaScript.

Parameters

  • Image_source − Source of an image
  • border_slice − Inner offset of an image border
  • border_width − Width of an image border
  • border_outset − Outer offset of an image border
  • repeat − repeats the image, stretch the image, or round the image
  • initial − Set to the properties default value
  • inherit − Inherit the value of the property from its parent

Example

In the example, we take the URL and a repeat value as input from a user. Users can use any URL of an image to display it as a border and select any value of the repeat property. After clicking a button, the image of the URL gets added as a border of the below container.

<html>
<body id = "body">
   <h3> Use <i> borderImage </i> property to set the border image repeat
   </h3>
   <label for = "url"> Enter Image URL </label>
   <input type = "text" id = "url" value = "" name = "URL"/> <br>
   <label> Select Repeat behaviour </label>
   <select id = "repeat_select">
      <option value = "stretch"> stretch
      </option>
      <option value = "repeat"> repeat
      </option>
      <option value = "round"> round
      </option>
   </select>
   <br>
   <button id = "btn">Submit</button>
   <div id = "container">
      This is a container
   </div>
   <script>
      var div = document.getElementById("container");
      div.style.width = "30%";
      div.style.height = "30%";
      div.style.border = "20px solid black";
      div.style.margin = "10px";
      div.style.textAlign = "center";
      document.getElementById("btn").addEventListener("click", execute);
      function execute(){
      var selectElement = document.querySelector('#repeat_select');
         var selected = selectElement.value;
         var URL = document.getElementById("url").value;
         div.style.borderImage = "url("+URL+")" + " 50 50 " + selected;
      }
   </script>
</body>
</html>

In the above example, users can see that we are adding an image as a border and setting a repeat behavior to an image. We have used the borderImage property to set the repeating behavior of the images.

In this tutorial, we have learned to set whether the border image should be repeated, rounded, or stretched with JavaScript.

Updated on: 26-Oct-2022

86 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements