CSS Property: border-image-slice
[this page | pdf | back links]
The CSS (CSS3) border-image-slice property specifies how
any border image should be sliced. The image is always sliced into nine
sections (3 x 3, i.e. 4 corners, 4 edge non-corners and 1 middle). The middle
part is fully transparent unless the fill keyword is set.
The property takes up to
four values. If the fourth is omitted then it is given the same value as the
second. If the third is omitted then it is given the same value as the first.
If the second is also omitted then it is given the same value as the first.
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
number
|
Number(s) of pixels for
raster images or coordinates for vector images
|
|
x%
|
Percentages relative to
height or width of image
|
|
fill
|
Middle part of image is
displayed
|
|
Default Value:
|
100%
|
|
JavaScript syntax:
|
e.g. object.style.borderImageSlice="20%"
|
|
Inherited:
|
No
|
|
Animatable:
|
No
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {
border: 10px solid transparent;
border-image: url('NematrianLogo.png') 10 round;
padding: 15px;
}
.x2 {border-image-slice: 50%;}
</style>
</head>
<body>
<p>1. border-image: url('NematrianLogo.png') 10 round;</p>
<p class="x2">2. different border-image-slice property</p>
<p id="x3">3. as per Element 2 but set using JavaScript</p>
<script>
document.getElementById("x3").style.borderImageSlice = "50%";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyBorderImageSlice() {
var x = document.createElement("DIV"); x.style.borderImageSlice = "0.5"; return (window.getComputedStyle(x, null).borderImageSlice == "0.5");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties