Master CSS 9‑Slice Scaling with Border‑Image for Seamless UI Stretching

Preface

Many game windows use flashy effects, but creating multiple assets for different window sizes is inefficient.

In game development, the "9‑slice scaling" technique solves this by dividing an image into nine regions (3 × 3) so that corners stay fixed while edges and the center stretch.

╔════╦═══════╦════╗
║ TL ║  Top  ║ TR ║
╠════╬═══════╬════╣
║ L  ║Center ║ R  ║
╠════╬═══════╬════╣
║ BL ║ Bottom║ BR ║
╚════╩═══════╩════╝

The four corners (TL, TR, BL, BR) remain unscaled to preserve UI details such as rounded corners or highlights. The four edges stretch in a single direction: top/bottom horizontally, left/right vertically. The center region stretches both horizontally and vertically to fill the remaining space.

Front‑end developers can achieve the same effect using three CSS properties:

border-image-source

,

border-image-slice

, and

border-image-repeat

.

Key CSS Properties

border-image-source

border-image-slice

border-image-repeat

These properties allow an image to be stretched without distortion by defining which parts are fixed and which are stretchable.

Example

Consider an image with a red grid marking the non‑stretchable and stretchable areas. The original size is 1064 × 141 px. Based on visual measurement, the top and bottom non‑stretchable zones are about 50 px, and the left/right zones about 200 px.

.frame-container {
  /* 1. Set border widths (top right bottom left) */
  border-width: 50px 200px 0 200px;
  border-style: solid;
  border-color: transparent; /* transparent, image will cover */
}

Next, specify the border image and slicing:

.frame-container {
  /* 1. Set border widths (top right bottom left) */
  border-width: 50px 200px 0 200px;
  border-style: solid;
  border-color: transparent;
  /* 2. Set the source image */
  border-image-source: url('./a.png');
  width: 1064px;   /* for demonstration */
  height: 141px;
  /* 3. Slice the image into 9 parts */
  border-image-slice: 50 200 0 200 fill;
  /* 4. Stretch edges, fill center */
  border-image-repeat: stretch;
  transition: 1s;
  background-color: white;
  box-sizing: border-box; /* include border in size */
}

Hovering the container changes its width to demonstrate how the stretchable area adapts while corners stay intact:

.frame-container:hover {
  width: 400px;
  height: 141px;
}

Result

The image now stretches horizontally or vertically (depending on its shape) without distortion, eliminating the need for multiple sliced assets.

By mastering this technique, developers no longer need to request numerous UI slices from designers.