CSS border-image-slice Property


The border-image-slice is a CSS property used to define how a border image should be sliced and divided into nine regions to be used as a border around an element. This property specifies the inward offsets from the top, right, bottom, and left edges of the border image, effectively defining the size of the corners and edges. By adjusting these values, web developers can create flexible and resizable border designs using a single image, ensuring that the corners and edges scale appropriately to fit the size of the element. This property is particularly useful for creating decorative and visually appealing borders in web design while maintaining responsiveness.

Initial value
Applies to
All elements
Computed value
As four values, each a number or percentage, and optionally a 'fill' keyword
JavaScript syntax

Interactive Demo

Example of the border-image-outset property.


border-image-slice: [<number> | <percentage>]{1,4} && fill? 


  • <number>Numbers represent pixels in the image (if the image is a raster image) or vector coordinates (if the image is a vector image).
  • <percentage>Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets.
  • fillThe 'fill' keyword, if present, causes the middle part of the border-image to be preserved. (By default it is discarded, i.e., treated as empty.)


<div>Example of the border-image-slice property</div>
div {
   border: 1em solid blue;
   border-image-source: url("images/border.png");
   border-image-repeat: round;
   border-image-width: 27px;
   border-image-slice: 27;
   border-image-outset: 20px;
   height: 70px;
   padding: 20px;
   margin: 20px;
   width: 200px;

Browser Support

The following table will show you the current browser support for the CSS border-image-slice property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st January 2024