CSS Border Images

What Is border-image?

The border-image property allows you to use an image instead of a traditional border. It slices the image into sections and places them around the element.

Basic Syntax

.box {
  border: 10px solid transparent;
  border-image: url("border.png") 30 round;
}

The image is sliced into 9 sections and applied around the element.

How border-image Works

The image is divided into:

• 4 corners
• 4 edges
• 1 center (optional fill)

border-image-source

Defines the image to use as a border.

.box {
  border-image-source: url("border.png");
}

border-image-slice

Specifies how far from the edges the image should be sliced.

.box {
  border-image-slice: 30;
}

border-image-width

Defines the width of the border image.

.box {
  border-image-width: 20px;
}

border-image-repeat

Controls how the edge sections are repeated.

• stretch – stretches the image
• repeat – repeats the image
• round – repeats and resizes to fit
• space – repeats with spacing

.box {
  border-image-repeat: round;
}

Full Example

.box {
  border: 15px solid transparent;
  border-image: url("border.png") 30 round;
}

Using border-image with Gradients

You can also use gradients as border images.

.box {
  border: 5px solid;
  border-image: linear-gradient(to right, red, blue) 1;
}

Important Notes

• You must define a border property for border-image to work.
• Transparent border is commonly used.
• border-image does not work without border-style.

Summary

• border-image replaces normal borders with images
• Supports slicing, width, and repeating options
• Can use images or gradients