CSS - border-image-slice Property
This property specifies how to slice the image that is set as a border using the property border-image-source.
The image is sliced in nine sections, i.e., four corners, four edges and a middle portion. The middle portion is transparent, unless the fill keyword is used.
Possible Values
number − It represents pixels for raster images or coordinates for vector images.
percentage (%) − It is relative to the height and width of the border image.
fill − It results in display of the middle part.
initial − It sets the default value to the property.
inherit − It inherits the property from the parent element.
Applies to
All the HTML elements.
DOM Syntax
object.style.borderImageSlice = "30%";
Example
Here is the example which shows effect of this property −
<html> <head> <style> .box { width: 200px; height: 200px; border: 20px solid; border-image-source: url(images/border.png); border-image-width: 15px; border-image-slice: 33%; border-image-outset: 8px; } </style> </head> <body> <div class="box"></div> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google