CSS Border Images

Think of a picture frame shop that can take any image, slice it into nine pieces like a tic-tac-toe grid, and wrap those pieces perfectly around a canvas of any size -- the corners stay crisp while the edges stretch or repeat to fit. border-image does exactly that slicing trick, letting an ordinary image become a scalable decorative border.

In this page:

The border-image Shorthand
border-image-source
border-image-slice
border-image-width and Outset
border-image-repeat: stretch vs round vs repeat

The border-image Shorthand

border-image is a shorthand that combines a source image, how it's sliced, its rendered width, and how the sliced pieces are repeated or stretched along the edges, replacing a plain solid/dashed border with a graphic one.

Example: The border-image Shorthand

css

<style>
.box {
  border: 20px solid transparent;
  border-image: linear-gradient(45deg, red, blue) 20;
}
</style>
<div class="box">Graphic border instead of solid or dashed</div>

border-image-source

border-image-source specifies the image to use, which can be a raster image URL or even a CSS gradient -- gradients are a common lightweight alternative to an actual image file for simple decorative borders.

Example: border-image-source

css

<style>
.box {
  border: 20px solid transparent;
  border-image-source: linear-gradient(90deg, orange, purple);
  border-image-slice: 20;
}
</style>
<div class="box">Gradient used as the border source</div>

border-image-slice

border-image-slice divides the source image into a 3x3 grid using four inward offsets (top, right, bottom, left), producing four corner pieces (never stretched), four edge pieces (stretched or repeated along one axis), and a center piece (used only if the fill keyword is added).

Example: border-image-slice

css

<style>
.box {
  border: 20px solid transparent;
  border-image-source: url('https://placehold.co/60x60');
  border-image-slice: 20 20 20 20;
}
</style>
<div class="box">Image sliced into a 3x3 grid</div>

border-image-width and Outset

border-image-width controls the rendered thickness of the border-image independently of the underlying border-width, and border-image-outset lets the image extend beyond the element's normal border box for decorative overhang effects.

Example: border-image-width and Outset

css

<style>
.box {
  border: 10px solid transparent;
  border-image-source: url('https://placehold.co/60x60');
  border-image-slice: 20;
  border-image-width: 15px;
  border-image-outset: 5px;
}
</style>
<div class="box">Rendered thickness and overhang set independently</div>

border-image-repeat: stretch vs round vs repeat

The repeat keyword controls how the edge pieces fill the space between corners: stretch scales them (may distort), repeat tiles them (may clip at the boundary), and round tiles them while scaling slightly so a whole number of copies fits without clipping.

Example: border-image-repeat: stretch vs round vs repeat

css

<style>
.box {
  border: 20px solid transparent;
  border-image-source: url('https://placehold.co/60x60');
  border-image-slice: 20;
}
.stretch { border-image-repeat: stretch; }
.round { border-image-repeat: round; }
.repeat { border-image-repeat: repeat; }
</style>
<div class="box stretch">stretch</div>
<div class="box round">round</div>
<div class="box repeat">repeat</div>

🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS Rounded Corners Next Lesson → CSS Text