CSS border-image-slice Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS border-image-slice dividing a source image into corners, edges, and fill
Definition

Definition and Usage

The border-image-slice property cuts the image from border-image-source into nine regions: four corners, four edges, and a middle. The numbers or percentages set how far each cut sits from the image sides.

Corners are used once. Edges are stretched or tiled by border-image-repeat. The middle is discarded unless you add the fill keyword. Negative values are invalid; values above the image size are clamped to 100%.

Baseline · Widely available.

Not deprecated and not experimental. Available across browsers since July 2015. Needs a border-image-source to have any effect.

Syntax

CSS Syntax

syntax.css
border-image-slice: <number> | <percentage> | fill | initial | inherit;

Use one to four offsets (like margin). Optional fill can sit anywhere in the declaration. Example: border-image-slice: 30 fill;.

Values

Property Values

ValueDescriptionTry it
<number>Offset in the source image’s coordinates (pixels for raster images). Default is 100%Try it
<percentage>Offset as a percent of the image width (horizontal) or height (vertical)Try it
fillKeeps the middle region and paints it inside the borderTry it
Two valuesFirst is top and bottom; second is left and rightTry it
Four valuesTop, right, bottom, left in that orderTry it
initialResets to the default value, 100%Try it
inheritInherits this property from the parent elementTry it
Approach

How to Use border-image-slice

Pick a source image, measure the frame thickness in that image, then set the slice to match.

  1. Set a non-zero border-width (for example border: 30px solid;).
  2. Point border-image-source at the artwork (or use the border-image shorthand).
  3. Set border-image-slice to the inset that matches the frame in the image. It is not inherited.
  4. Add fill only if you want the middle of the source painted inside the box.
PieceRequired?Role
Border widthYesGives the sliced regions a place to paint
Image sourceYesThe artwork that gets cut into nine regions
Slice offsetsYesNumber or percentage inset from each side
fillOptionalShows the middle region inside the border
Try it

Live Preview

Change border-image-slice and watch how much of the source becomes corners and edges. Try fill to keep the middle.

Match the slice to the frame thickness in the source image for clean corners.

Slices

border-image-slice: 30

Code

CSS Examples

Each snippet adds only what border-image-slice needs: a border, a source, and a slice value. Use Try It Yourself for a live editor.

Example 1 — Number Slice

Cut 30 image-pixels in from every side to form corners and edges.

CSS
<style>
  div {
    border: 30px solid;
    border-image-source: url("/images/apple.png");
    border-image-slice: 30;
    padding: 12px;
  }
</style>

<div>slice: 30</div>
Try It Yourself

How It Works

  1. Reserve a border. border: 30px solid; gives the sliced regions a place to paint.
  2. Load the source. border-image-source points at the artwork that will be cut.
  3. Cut from every side. border-image-slice: 30 places four cuts 30 units in from each edge of the image.
  4. Nine regions. That creates four corners, four edges, and a middle (discarded here because fill is omitted).

Example 2 — Keep the Middle with fill

Same slice, but paint the center of the source inside the box.

CSS
<style>
  div {
    border: 30px solid;
    border-image-source: url("/images/apple.png");
    border-image-slice: 30 fill;
    padding: 12px;
  }
</style>

<div>30 fill</div>
Try It Yourself

How It Works

  1. Same cuts as before. The 30 still defines the corner and edge regions.
  2. Add fill. The fill keyword can sit anywhere in the value list.
  3. Keep zone 9. The middle of the source is painted inside the border, above the element’s normal background.
  4. Without fill. That middle region would be discarded and only the frame would show.

Example 3 — Percentage Slice

Size the cuts as a percent of the source image. Useful when the image size may change.

CSS
<style>
  div {
    border: 24px solid;
    border-image-source: url("/images/apple.png");
    border-image-slice: 25%;
    padding: 12px;
  }
</style>

<div>slice: 25%</div>
Try It Yourself

How It Works

  1. Use a percentage. 25% measures from each side of the source image.
  2. Width and height. Horizontal offsets use the image width; vertical offsets use the image height.
  3. Scale with the asset. If the image is replaced with a larger version of the same design, the relative cut stays in proportion.
  4. Prefer % for SVG. For vector sources, percentages are usually clearer than unitless numbers.

Edge Cases & Pitfalls

If corners look stretched or the middle is missing, check these first.

source

No source, no slices

Slice only divides an image. Set border-image-source (or the shorthand) before you expect a frame.

match

Slice should match the artwork

If the decorative frame in the PNG is 30px thick, start with 30. A wrong value pulls the wrong part of the image into the corners.

fill

Middle is off by default

Without fill, zone 9 is discarded. Add fill when you want the center of the source inside the box.

clamp

Oversized values clamp to 100%

Offsets larger than the image dimension are treated as 100%. Negatives are invalid and the declaration is ignored.

reset

border resets the image

The border shorthand sets border-image back to none. Declare source and slice after border.

Compatibility

Browser Support

border-image-slice is a browser CSS property for decorative borders. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

border-image-slice

Chrome 15+, Firefox 15+, Safari 6+, Edge 12+, Internet Explorer 11+. The fill keyword is supported from Chrome 16+.

97% Global support
Google Chrome 15+ · fill 16+
Full support
Mozilla Firefox 15+
Full support
Apple Safari 6+
Full support
Microsoft Edge 12+
Full support
Opera 15+
Full support
Samsung Internet 1.0+
Full support
Internet Explorer 11
Full support
border-image-slice Widely supported

Bottom line: Safe for production nine-slice frames. Match the slice to the artwork, and use fill when you need the middle. It is not a runtime API.

Remember

Key Takeaways

  • Role: cut the source into four corners, four edges, and an optional middle.
  • Default: 100%. Not inherited. Middle discarded unless fill.
  • Values: numbers or percentages; one to four sides, like margin.
  • Match the art: set the slice to the frame thickness in the source image.

One line: border-image-slice decides which parts of the source become corners and edges — after you have a source, and optionally fill for the middle.

Frequently Asked Questions

It divides the border-image-source into nine regions: four corners, four edges, and a middle. The numbers or percentages set how far each cut sits from the image sides.
The initial value is 100%. That places the cuts at the far edges of the source image.
By default the middle region is discarded. fill keeps it and paints it inside the border, above the element’s background.
For raster images, a number is an offset in the image’s own pixel coordinates. For vector images, prefer percentages because a number is tied to the element size, not the SVG’s intrinsic size.
The slice must match the artwork. If the decorative frame in the image is 30px thick, start with border-image-slice: 30 and a similar border-width. Wrong values stretch or squash corners.
It is Baseline Widely available: Chrome 15+, Firefox 15+, Safari 6+, Edge 12+, and Internet Explorer 11. The fill keyword is supported from Chrome 16+. It is a browser CSS property, not a Node.js feature.

Next: border-image-source

Choose the image or gradient that border-image-slice will divide.

border-image-source tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS border-image-repeat Property CSS border-image-source Property