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