Border Images

By the end of this lesson, you will be able to replace a plain CSS border with a decorative image using border-image, control how the image is sliced, and choose a repeat mode that keeps corners intact.

What it is

Border images let you use an image as the border of an element instead of a solid color. The browser divides the image into nine regions: four corners, four edges, and a center. The corners are drawn at the element corners, while the edges are stretched, repeated, rounded, or spaced along the sides.

Related terms: border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat. The shorthand border-image combines these values.

Why it matters

• Creates ornate frames without extra wrapper elements.
• Keeps corner artwork intact when the element changes size.
• Works well for cards, buttons, panels, and decorative containers.
• Can replace multiple background images or pseudo-elements for simple frames.
• Provides a CSS-native way to reuse a single frame asset across many elements.

Syntax or steps

The smallest useful pattern is:

.frame {
  border: 10px solid;
  border-image: url('frame.png') 30 round;
}

Read it as: use frame.png as the border image, slice 30 pixels from each edge of the source image, and repeat the edge slices with round. The border line reserves border space and gives the element a border style; without a visible border area, the image may not appear as expected.

Full shorthand order:

border-image: source slice / width / outset repeat;

Use fill after the slice if you want the center of the image to remain visible.

Example

.card {
  border: 12px solid;
  border-image: url('ornate-frame.png') 40 40 40 40 / 12px / 4px round;
  padding: 1rem;
  background: #fff;
}

Part by part:

• border: 12px solid; creates a 12-pixel border area and sets a border style.
• url('ornate-frame.png') is the image used for the border.
• 40 40 40 40 slices 40 pixels from the top, right, bottom, and left edges of the image.
• / 12px sets the border-image width to 12 pixels.
• / 4px pushes the border image 4 pixels outward from the border box.
• round repeats the edge slices and scales them so whole slices fit evenly.

Common mistakes

• Forgetting border-style or border-width. Fix: set a border area, such as border: 10px solid;.
• Choosing a slice value that is too large. Fix: reduce the slice so the corners and edges remain visible.
• Using repeat when the edge pattern has seams. Fix: try round or space, or design the edge slice to tile seamlessly.
• Expecting the center image to show. Fix: add fill to border-image-slice or use a background image for the center.

When to use it

Use border-image when the decoration belongs to the border box and you want corners preserved. Use border-radius or box-shadow when you need simple rounded edges or soft depth. Use a background image when the decoration should cover the whole element, including the center.

Practice

Guided exercise: create a .frame class with a 10-pixel solid border and a border image sliced 30 pixels from each side, using round.

.frame {
  border: 10px solid;
  border-image: url('frame.png') 30 round;
}

Challenge: make the border image extend 2 pixels outside the element and keep the center image visible. Hint: use / 2px for outset and add fill after the slice.

Quick check

Question: What does the slice value control in border-image?

Answer: It controls how far from each edge of the source image the browser cuts to create the corner and edge regions.

Summary

Border images turn a single image into a scalable frame by slicing it into corners and edges. The key is to reserve border space, choose slice values that match the artwork, and pick a repeat mode that fits the design.