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