Border Image

Border Image lets you use an image as a border instead of a plain solid color. This feature is very useful for creating attractive border decorations without needing many extra HTML elements. You can use an image, a gradient, or even SVG as the border.

With border-image, you can create complex borders such as decorative frames, gradient effects on the edges, or unique patterns surrounding an element. This property works by cutting the source image into 9 pieces (like a puzzle) and placing them on the element's edges.

There are several supporting properties: border-image-source to set the image, border-image-slice to cut the image, border-image-width for the thickness, and border-image-repeat to control how the image is repeated.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 40px;
    background: #f0f0f0;
  }

  .box-gradient {
    width: 300px;
    height: 150px;
    padding: 20px;
    margin: 20px 0;
    border: 10px solid;
    border-image-source: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
    border-image-slice: 1;
    border-image-width: 10px;
    background: white;
  }

  .box-image {
    width: 300px;
    height: 150px;
    padding: 20px;
    margin: 20px 0;
    border: 15px solid;
    border-image-source: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="%23ddd"/><rect x="5" y="5" width="20" height="20" fill="%23ff6b6b" rx="3"/><rect x="35" y="35" width="20" height="20" fill="%234ecdc4" rx="3"/></svg>');
    border-image-slice: 20;
    border-image-width: 15px;
    border-image-repeat: repeat;
    background: white;
  }

  .box-stretch {
    width: 300px;
    height: 150px;
    padding: 20px;
    margin: 20px 0;
    border: 15px solid;
    border-image-source: linear-gradient(to right, #667eea, #764ba2);
    border-image-slice: 1;
    border-image-width: 15px;
    border-image-repeat: stretch;
    background: white;
  }

  .box-round {
    width: 300px;
    height: 150px;
    padding: 20px;
    margin: 20px 0;
    border: 15px solid;
    border-image-source: linear-gradient(135deg, #f093fb, #f5576c);
    border-image-slice: 1;
    border-image-width: 15px;
    border-image-repeat: round;
    background: white;
  }

  .box-space {
    width: 300px;
    height: 150px;
    padding: 20px;
    margin: 20px 0;
    border: 15px solid;
    border-image-source: linear-gradient(to bottom, #11998e, #38ef7d);
    border-image-slice: 1;
    border-image-width: 15px;
    border-image-repeat: space;
    background: white;
  }
</style>
</head>
<body>
  <h2>Gradient Border</h2>
  <div class="box-gradient">
    Gradient border with slice: 1
  </div>

  <h2>Pattern Border</h2>
  <div class="box-image">
    SVG pattern border with repeat
  </div>

  <h2>Stretch (default)</h2>
  <div class="box-stretch">
    Image stretches along the edges
  </div>

  <h2>Round</h2>
  <div class="box-round">
    Round image repeated with rounded corners
  </div>

  <h2>Space</h2>
  <div class="box-space">
    Space image repeated with gaps between images
  </div>
</body>
</html>

Code Explanation

border-image-source: Sets the image source for the border. It can be an image URL, a linear-gradient(), a radial-gradient(), or any other value that produces an image.

border-image-slice: Cuts the source image into 9 pieces (4 corners, 4 edges, 1 center). A value of 1 means the entire image is used as a single slice. Larger values cut the image into smaller pieces.

border-image-width: Sets the thickness of the border image. Can be in px, em, or relative values. Controls how thick the border image is displayed.

border-image-repeat: Controls how the image is displayed in the edge areas:
- stretch: The image is stretched to fill the entire edge (default)
- repeat: The image repeats without stretching
- round: The image repeats, stretched so it fits exactly without partial pieces
- space: The image repeats with empty space between the copies

Everyday Use Cases

Digital greeting cards: Use border-image with a gradient to create attractive greeting cards. The gradient can be matched to the event's theme.

Portfolio website: Create decorative frames for portfolio photos using an SVG pattern as the border image. The pattern can be floral, geometric, or a distinctive motif.

Online certificates: Use border-image with an ornamental image to create an elegant certificate frame without needing graphic design.

Admin dashboard: Apply a gradient border to statistics cards to visually distinguish the different types of data.

Conclusion

border-image is a powerful property for border decoration. The four main properties (source, slice, width, repeat) work together to produce an attractive border. Gradients are the easiest way to start because they do not require an external image file. Use border-image when you want a border that is more than just a solid color.