CSS border-image-slice Property

The border-image-slice CSS property divides or slices an image specified by the border-image-source property.

Syntax

border-image-slice: number | % | fill | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url('https://webtutor.dev/images/border.png') round;
        border-image-slice: 5%;
    }

    .ex2 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url('https://webtutor.dev/images/border.png') round;
        border-image-slice: 15%;
    }

    .ex3 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url('https://webtutor.dev/images/border.png') round;
        border-image-slice: 25%;
    }
</style>
</head>
<body>

<div class="ex1">border-image-slice: 5%;</div>
<div class="ex2">border-image-slice: 15%;</div>
<div class="ex3">border-image-slice: 25%;</div>

<p>Here is the image used:</p>
<img src="https://webtutor.dev/images/border.png" alt="Border">

</body>
</html>

Preview

Property Values

Value	Description
number	The number(s) represent pixels in raster images or vector image coordinates.
%	The percentages are in relation to the image's height or width.
fill	This causes the image's middle section to be displayed.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
border-image-slice	15.0	15.0	6.0	11.0	15.0

border-image-repeat

border-image-source

CSS border-image-slice Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us