CSS Property border-image-slice
The border-image-slice
CSS property divides the image from border-image-source
in nine parts: the four corners, the four edges and the middle.
It controls the distance by specifying 4 inwards offsets.
Summary
- Initial value
- 100%
- Inherited
- no
- CSS Version
- CSS3
- JavaScript syntax
- object.style.borderImageSlice="50% 10%"
- Animatable
- no
CSS Syntax
border-image-slice: [<number> | <percentage>]{1,4};
One-value syntax
border-image-slice: slice E.g. border-image-slice: 30%;
Two-value syntax
border-image-slice: horizontal vertical E.g. border-image-slice: 10% 30%;
Three-value syntax
border-image-slice: top vertical bottom
E.g. border-image-slice: 30 30% 45;
Four-value syntax
border-image-slice: top right bottom left E.g. border-image-slice: 7 15 24 35;
The fill value can be placed between any value.
E.g. border-image-slice: 10% fill 7 12;
Property Values
- number
- represents pixels for raster images and coordinates for vector images.
- percentage
- values relative to the height or width of the image, whichever is adequate.
- fill
- forces middle image slice to be displayed over the background image
- initial
- sets to default value
- inherit
- Inherits this property from its parent element
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
border-image-slice |
Yes | Yes | Yes | Yes | Yes |
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {<!-- w ww .j ava 2s. c om-->
background-color: lightgrey;
border: 30px solid transparent;
border-image: url('http://java2s.com/style/demo/border.png');
border-image-slice: 15%;
}
</style>
</head>
<body>
<div>
This DIV uses an image as a border.
</div>
<p>Here is the image used:</p>
<img src="http://java2s.com/style/demo/border.png"/>
</body>
</html>