CSS border-image-slice Property

Description

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
100%
Applies to
All elements
Inherited
No
Computed value
As four values, each a number or percentage, and optionally a 'fill' keyword
Animatable
No
JavaScript syntax
object.style.borderImageSlice

Interactive Demo

Example of the border-image-outset property.

Syntax

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

Values

  • <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.)

Example

<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.

Desktop
Edge Chrome Firefox Opera Safari
121515156
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
181514614.4

Last updated by CSSPortal on: 1st January 2024