How to Use Border-Image in CSS: Syntax and Examples

Use the border-image property in CSS to set an image as the border of an element. It requires specifying an image source and slicing values to control how the image is divided and stretched around the border.

Syntax

The border-image property combines several values to control the border image:

• source: URL or gradient for the border image.
• slice: Defines how to cut the image into parts for corners and edges.
• width: Optional, sets the width of the border image area.
• outset: Optional, how far the border image extends outside the border box.
• repeat: How the image edges fill the border area (stretch, repeat, round).

Example syntax:

css

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

Example

This example shows how to use border-image with a simple image to create a decorative border around a box. The image is sliced into 30 pixels from each side and stretched to fit the border.

css

div {
  border: 10px solid transparent;
  border-image-source: url('https://i.imgur.com/7bI6XQx.png');
  border-image-slice: 30;
  border-image-repeat: stretch;
  border-image-width: 10px;
  border-image-outset: 0;
}

Output

A rectangular box with a decorative image border sliced from the provided image, stretched evenly around all sides.

Common Pitfalls

Common mistakes when using border-image include:

• Not setting a border style or width, so the border image won't show.
• Using incorrect slice values that cut the image badly.
• Forgetting to set border-image-source or using an invalid URL.
• Expecting the image to tile by default; you must specify border-image-repeat.

Example of a common mistake and fix:

css

/* Wrong: no border style or width set, so no border image visible */
div {
  border-image-source: url('image.png');
  border-image-slice: 30;
}

/* Correct: add border style and width */
div {
  border: 10px solid transparent;
  border-image-source: url('image.png');
  border-image-slice: 30;
}

Quick Reference

Summary of border-image properties:

Property	Description	Example
border-image-source	Sets the image used for the border	url('border.png')
border-image-slice	Defines how to slice the image into parts	30 or 30 30 30 30
border-image-width	Sets the width of the border image area	10px or 1
border-image-outset	How far the border image extends outside the border box	0 or 5px
border-image-repeat	How the image edges fill the border (stretch, repeat, round)	stretch

Key Takeaways

Always set a border style and width for the border image to appear.

Use border-image-slice to control how the image is divided for corners and edges.

Specify border-image-repeat to control how the image fills the border area.

The border-image property lets you create custom borders using images.

Check image URLs and slice values carefully to avoid broken or distorted borders.