HTML | DOM Style borderImageSource Property Last Updated : 09 Aug, 2022 Comments Improve Suggest changes Like Article Like Report The DOM Style borderImageSource Property is used to set or return the image to be used instead of the styles given by the border-style property. Syntax: To get the borderImageSource propertyobject.style.borderImageSourceTo set the borderImageSource propertyobject.style.borderImageSource = "none | image | initial | inherit" Return Values: It returns a string value which represents the border-image-source property of an element. Property Values 1. none: It is a default value. This sets the property to use no image. Example-1: html <!DOCTYPE html> <html lang="en"> <head> <title>DOM Style borderImageSource Property</title> <style> .item { height: 50px; border: 25px solid transparent; /* Setting the border before demonstrate the effect of 'none' */ border-image: url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png'); } </style> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <b>DOM Style borderImageSource Property</b> <p>Click on the button to change the source of border-image</p> <div class="item">GeeksforGeeks</div> <button onclick="changeSource()"> Change source of border-image </button> <script> function changeSource() { elem = document.querySelector('.item'); // Setting the border image source to none elem.style.borderImageSource = "none"; } </script> </body> </html> Output: Before clicking the button: After pressing the button: 2. image: This sets the image to the path specified. Example-2: html <!DOCTYPE html> <html lang="en"> <head> <title>DOM Style borderImageSource Property</title> <style> .item { height: 50px; border: 25px solid transparent; } </style> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <b>DOM Style borderImageSource Property</b> <p>Click on the button to change the source of border-image</p> <div class="item">GeeksforGeeks</div> <button onclick="changeSource()"> Change source of border-image </button> <script> function changeSource() { elem = document.querySelector('.item'); // Setting the border image source to another image elem.style.borderImageSource = "url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png')"; } </script> </body> </html> Output: Before clicking the button: After clicking the button: 3. initial: This is used to set this property to its default value. Example-3: html <!DOCTYPE html> <html lang="en"> <head> <title>DOM Style borderImageSource Property</title> <style> .item { height: 50px; border: 25px solid transparent; /* Setting the border before to demonstrate the effect of 'initial' */ border-image: url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png'); } </style> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <b>DOM Style borderImageSource Property</b> <p>Click on the button to change the source of border-image</p> <div class="item">GeeksforGeeks</div> <button onclick="changeSource()"> Change source of border-image </button> <script> function changeSource() { elem = document.querySelector('.item'); // Setting the border image source to initial elem.style.borderImageSource = "initial"; } </script> </body> </html> Output: Before clicking the button: After pressing the button: 4. inherit: This is used to inherit the property from its parent. Example-4: html <!DOCTYPE html> <html lang="en"> <head> <title>DOM Style borderImageSource Property</title> <style> .item { height: 50px; border: 25px solid transparent; } #parent { /* Setting the border of parent demonstrate the effect of 'inherit' */ border-image: url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png'); } </style> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <b>DOM Style borderImageSource Property</b> <p>Click on the button to change the source of border-image</p> <div id="parent"> <div class="item">GeeksforGeeks</div> </div> <button onclick="changeSource()"> Change source of border-image </button> <script> function changeSource() { elem = document.querySelector('.item'); // Setting the border image source // to inherit from its parent elem.style.borderImageSource = "inherit"; } </script> </body> </html> Output: Before clicking the button: After pressing the button: Supported Browsers: The browser supported by borderImageSource Property are listed below: Chrome 15Edge 12Internet Explorer 11Firefox 15Safari 6Opera 15 Comment More infoAdvertise with us S sayantanm19 Follow Improve Article Tags : Web Technologies HTML HTML-DOM Similar Reads HTML DOM ColumnGroup Object The ColumnGroup Object in HTML DOM is used to represent the HTML <colgroup> element. This tag is used to set or return the properties of <colgroup> element. It can be accessed by using getElementById() method. Syntax: document.getElementById( "ColGroup_ID" );This ColGroup_ID is assigned 2 min read HTML | DOM Window frameElement Properties HTML DOM Window frameElement property returns the iframe element in which the window is embedded or stored. If it is not stored, in that case, it simply returns a null value. Syntax: window.frameElement Return Value: It returns an IFrame object or null. Example: html <!DOCTYPE html> <html 1 min read HTML | DOM Style columnRuleStyle Property The DOM style columnRuleStyle Property in HTML is used to define or determine the style of rule between columns. Syntax : To set the property: object.style.columnRuleStyle = "none|hidden|dotted|dashed|solid| double|groove|ridge|inset|outset|initial|inherit" To return the property: object.style.colum 6 min read HTML | DOM Style columnRuleWidth Property The Style columnRuleWidth property in HTML DOM is used to define or determine the width of the rule between the columns. Syntax: It returns the columnRuleWidth property.object.style.columnRuleWidthIt is used to set columnRuleWidth property.object.style.columnRuleWidth = "medium|thin|thick|length| in 3 min read HTML DOM adoptNode() Method This DOM adoptNode() method is used to adopt a node from another document. All node types can be adopted. All child nodes along with the original node can be adopted. AdoptNode() method is used to return node objects.Syntax: document.adoptNode(node)Parameter Value: DOM adoptNode() method contains on 2 min read HTML | DOM Style zIndex Property The Style zIndex property is used for set or return the stack order of a positioned element. The element which has a lower stack order will be behind of another element with higher stack order. For example, the element with stack order(1) will be in front of the element with stack order(0). The Styl 2 min read HTML | DOM Input Password Object The Input Password Object in HTML DOM is used to represent an HTML input element with type="password". The input element with type="password" can be accessed by using getElementById() method. Syntax: It is used to access input type="password"document.getElementById("id");It is used to create type="p 3 min read HTML | DOM Column Object The Column Object in HTML DOM is used to represent the HTML <col> element. This tag is used to set or get the properties of <col> element. It can be accessed by using getElementById() method.Syntax: document.getElementById("Col_ID"); This Col_ID is assigned to HTML < col > element. 2 min read HTML | DOM Input Hidden Object The Input Hidden object in HTML DOM represents the <input> element with type = “hidden†attribute. The element can be accessed by using getElementById() method.Syntax: document.getElementById("id"); where id is assigned to the <input> tag.Property Values: defaultvalue: It is used to set 2 min read HTML | DOM Input Time Object The Input Time object in HTML DOM represents an <input> element with type = "time" attribute. The time attribute can be accessed by using getElementById() method. Syntax: document.getElementById("id"); where id is assigned to the <input> tag. Property Values: list: It returns the referen 3 min read Like