/

HTML / CSS / JavaScript Tutorial

CSS Property: border-image

[this page | pdf | back links]

The CSS (CSS1) border-image property is a shorthand property combining (up to) 5 of the border-image properties. These allow you to specify that an image should be used instead of the normal border around an element.

 

Valid property values (other than inherit and initial) are defined by the elements of the shorthand. Shorthand elements (in the order in which they appear):

 

-        border-image-source

-        border-image-slice

-        border-image-width

-        border-image-outset

-        border-image-repeat

 

Default Value:

none 100% 1 0 stretch

JavaScript syntax:

e.g. object.style.borderImage="url(myborder.png) 20 round"

Inherited:

No

Animatable:

No

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
.x1 {
  border: 10px solid transparent;
  border-image: url('NematrianLogo.png') 10 round;
  padding: 15px;
}
.x2 {
  border: 10px solid transparent;
  border-image: url('NematrianLogo.png') 20% round;
  padding: 15px;
}
</style>
</head>
<body>
<p class="x1">1. border-image: url('NematrianLogo.png') 100% 1 .2 repeat;</p>
<p class="x2">2. border-image: url('NematrianLogo.png') 10 round;</p>
<p id="x3">3. as Element 2 but set using JavaScript</p>

<script>
document.getElementById("x3").style.border = "10px solid transparent";
document.getElementById("x3").style.borderImage = "url('NematrianLogo.png') 20% round";
document.getElementById("x3").style.padding = "15px";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyBorderImage() {
  var x = document.createElement("DIV"); x.style.borderImage = "url(NematrianLogo.png) 20% round"; return (window.getComputedStyle(x, null).borderImage == "url(NematrianLogo.png) 20% round");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile