CSS border-image Property

What You’ll Learn

The border-image property uses an image or gradient as a border. CSS slices the source into corners and edges, then stretches or repeats those pieces around your element.

Definition and Usage

The border-image CSS property is a shorthand for drawing borders with an image or gradient instead of a basic line style. The browser slices the source image into nine regions — four corners, four edges, and a center — then places those regions around the element’s border box.

This property is useful for decorative frames, themed cards, buttons, and UI elements that need richer borders than solid, dashed, or dotted can provide.

📝 Syntax

border-image combines source, slice, width, outset, and repeat in one declaration:

selector {
  border-image: source slice / width / outset repeat;
}

Basic Example

.bordered {
  width: 300px;
  height: 200px;
  border: 10px solid transparent;
  border-image: url("border-image.png") 30 round;
}

Syntax Rules

• You need a border width so the browser has space to paint the image border.
• slice defines how far inward the image is cut from each edge.
• Width and outset are optional and separated by / when used.
• repeat controls whether edge pieces stretch, repeat, round, or space.
• Gradients can replace url() as the image source in modern browsers.

Default Value

The default value of border-image is none. When set to none, no image border is used and the element relies on normal border properties instead.

💎 Property Values

The shorthand accepts these component values:

Longhand Sub-Properties

Repeat Keywords

border-image vs related properties

Examples Gallery

Try border-image with image URLs, slice values, repeat modes, and gradient borders.

<style>
  .bordered {
    width: 300px;
    height: 200px;
    border: 10px solid transparent;
    border-image: url("border-image.png") 30 round;
  }
</style>

<div class="bordered"></div>

.gradient-border {
  padding: 1rem;
  border: 4px solid transparent;
  border-image: linear-gradient(135deg, #2563eb, #9333ea) 1;
  background: #fff;
}

.pattern {
  width: 16rem;
  height: 6rem;
  border: 8px solid transparent;
  border-image: repeating-linear-gradient(45deg, #dc2626 0 10px, #fff 10px 20px) 8 round;
  background: #fff;
}

.card {
  max-width: 18rem;
  padding: 1.25rem;
  border: 6px solid transparent;
  border-image: linear-gradient(to right, #059669, #2563eb) 1;
  background: #f8fafc;
  border-radius: 0.25rem;
}

💡 Best Practices