CSS Advanced

CSS Border Images

The border-image property lets you paint an image or gradient into the border area of an element instead of a plain solid line. A source image is sliced into nine pieces so the corners stay crisp while the edges stretch or repeat.

How border-image works

border-image is a shorthand for several longhand properties. It takes a source, slices it into a 3x3 grid, and maps the four corners to the element's corners and the four edges to its sides. The center slice is discarded by default.

Shorthand syntax

.frame {
  border: 30px solid transparent;
  border-image: url(frame.png) 30 / 30px / 0 round;
  /*            source          slice / width / outset repeat */
}

The border-image longhands

Property	Purpose
border-image-source	The image or gradient to use
border-image-slice	Where to cut the source into 9 regions
border-image-width	Thickness of the drawn border image
border-image-outset	How far the image extends beyond the border box
border-image-repeat	How edges fill: stretch, repeat, round, or space

Gradient borders

A gradient is a valid image, so you can create colorful gradient frames without any image file. Set border-image-slice to 1 so the gradient fills the whole edge.

Try it: gradient border frame

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; padding: 40px; background: #111827; }
  .card {
    color: #f9fafb; padding: 30px; font-size: 18px;
    border: 10px solid;
    border-image: linear-gradient(45deg, #f472b6, #818cf8, #22d3ee) 1;
    background: #1f2937;
  }
</style>
</head>
<body>
  <div class="card">This card has a gradient border made entirely with CSS border-image.</div>
</body>
</html>

Repeat: stretch vs round

The repeat keyword controls how the edge slices fill the sides. stretch scales one slice to fit, repeat tiles it (possibly clipping), round scales tiles so a whole number fit, and space adds gaps between tiles.

Try it: striped repeating border

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; padding: 40px; background: #f8fafc; }
  .ticket {
    padding: 24px; background: #fff; color: #0f172a;
    border: 16px solid;
    border-image: repeating-linear-gradient(45deg,
        #f59e0b 0 10px, #1e293b 10px 20px) 16;
  }
</style>
</head>
<body>
  <div class="ticket">A striped, ticket-style border built from a repeating gradient.</div>
</body>
</html>

⚠️

border-image only appears if the element has a border style and width. Corners are never repeated or stretched, only the four edges.

ℹ️

border-image-slice numbers are unitless for raster images (interpreted as pixels of the source) and can use percentages for gradients.

Key points

border-image slices a source into 9 regions and maps them to the border.
You must declare a border width for border-image to show.
Gradients count as images, enabling gradient borders with slice 1.
repeat keywords stretch, repeat, round, or space the edges.
border-image-outset pushes the image beyond the border box.