CSS border-image-slice Property

February 10, 2021 12:37 pm IST

You are Here:

CSS border-image-slice Property

CSS border-image-slice property specifies how to slice the image specified by border-image-source.

Note: The slicing process creates nine regions in total: four corners, four edges and the middle.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 15px solid transparent; padding: 15px; border-image-source: url(border.png); border-image-repeat: repeat; } #point{ border-image-slice: 30; } #point1{ border-image-slice: 50; } </style> </head> <body> <h1>CSS border-image-slice Property</h1> <h2>border-image-slice: 30;</h2> <div id="point"> border-image-slice: 30; </div> <h2>border-image-slice: 50;</h2> <div id="point1"> border-image-slice: 50; </div> </body> </html>

Run

Syntax

Using CSS

element{ border-image-slice: 30; }

Using Javascript

object.style.borderImageSlice="30";

Animatable

No, border-image-slice property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS border-image-slice property is 100%.

Property Value

The following table provides a list of values for CSS border-image-slice property.

Value	Explanation
Number	A number in pixels for raster images and coordinates for vector images.
%	Specifies a percentage of the source image's size.
fill	Preserves the middle image region and displays it like a background image, but stacked above the actual background.

Using JavaScript

In the following example, we will demonstrate how to change the CSS border-image-slice property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 15px solid transparent; padding: 15px; border-image-source: url(border.png); border-image-slice: 30; border-image-repeat: repeat; } </style> </head> <body> <h1>CSS border-image-slice Property</h1> <div> This is div container. </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.borderImageSlice = "50"; } </script> </body> </html>

Run