HTML | DOM Style borderImageSource Property
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 property
object.style.borderImageSource
- To set the borderImageSource property
object.style.borderImageSource = "none | image | initial | inherit"
Property Values
- none: This sets the property to use no image.
Example-1:
<!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:
}
</
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:
- Before clicking the button:
- image: This sets the image to the path specified.
Example-2:
<!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 =
}
</
script
>
</
body
>
</
html
>
Output:
- Before clicking the button:
- After clicking the button:
- Before clicking the button:
- initial: This is used to set this property to its default value.
Example-3:
<!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:
}
</
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:
- Before clicking the button:
- inherit: This is used to inherit the property from its parent.
Example-4:
<!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:
}
</
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:
- After pressing the button:
Before clicking the button:
- After pressing the button:
Supported Browsers: The browser supported by borderImageSource Property are listed below:
- Chrome
- Internet Explorer 11.0
- Firefox
- Safari 6.0