?️ CSS Border Images

? Quick Overview

CSS border images allow you to replace plain borders with an image-based frame around an element. Using properties like border-image-source, border-image-slice, and border-image-repeat, you can control how an image is sliced, stretched, or repeated around the element’s box.

Border images are configured using either the shorthand border-image or a combination of individual properties.

? Key Concepts

? border-image-source – Image used as the border.
✂️ border-image-slice – How the image is sliced into regions.
? border-image-width – Thickness of the border image.
? border-image-repeat – How slices are drawn: stretch, repeat, round, or space.
↔️ border-image-outset – How far the border image extends beyond the box.
? border-image – Shorthand for setting everything in one go.

? Syntax / Theory

To display a border image, the element must have a visible border defined first, usually using border: X solid transparent;. Then you apply the border image settings.

? View Code Example

/* Basic border-image configuration using longhand properties */
.box {
  border: 10px solid transparent;
  border-image-source: url("image.png");
  border-image-slice: 30;
  border-image-width: 10px;
  border-image-repeat: round;
  border-image-outset: 0;
}

The shorthand border-image can simplify the declaration by combining several properties into a single line.

? View Shorthand Example

/* Using the border-image shorthand: source slice repeat */
.box {
  border: 10px solid transparent;
  border-image: url("image.png") 30 round;
}

? Full Code Example

Here is a small HTML and CSS demo that uses a PNG frame image as a decorative border around a content box.

? View Full Demo Code

<!-- HTML + CSS example using border-image -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Border Image Demo</title>
  <style>
    .border-box {
      width: 260px;
      padding: 20px;
      border: 16px solid transparent;
      border-image: url("frame-border.png") 30 round;
      text-align: center;
      font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <div class="border-box">
    Fancy border using an image!
  </div>
</body>
</html>

? Live Output / Explanation

? What this would look like:

The element gets a decorative frame created from the image frame-border.png. The image is sliced into nine regions (four corners, four edges, and one center). The corners are placed at the corners of the element, while the edges are repeated or rounded along each side using border-image-repeat: round;.

Because we used border: 16px solid transparent;, the border area exists but is visually filled by the image instead of a solid color.

? Border Image Properties Reference

Property	Description	Example
`border-image-source`	Sets the image to use as the border.	`url("border.png")`
`border-image-slice`	Defines how to divide the image (top, right, bottom, left).	`30`
`border-image-width`	Sets the width of the border image area.	`10px`
`border-image-repeat`	Defines how the image is drawn: `stretch`, `repeat`, `round`, or `space`.	`round`
`border-image-outset`	Extends the border image outside the element's box.	`0`
`border-image`	Shorthand for setting all of the above in one line.	`border-image: url("border.png") 30 round;`

? Tips & Best Practices

Use a symmetrical, frame-like image so borders look good on all sides.
Experiment with border-image-slice values like 10, 30, or 50 to find the best slice area.
border-image-repeat: round; helps evenly tile the image along edges without awkward stretching.
Always define a base border (e.g. border: 10px solid transparent;) so the border area exists.
Use high-resolution images for crisp borders on high-DPI screens.

? Try It Yourself

Create a <div> with a class like .photo-frame and apply a border-image using any PNG frame of your choice.
Change border-image-slice values (e.g. 10, 30, 50) and observe how much of the image is used for the border.
Experiment with border-image-repeat: stretch;, round;, and repeat; to see the difference in how the image is drawn along each side.
Try combining a background-image inside the box with a border-image to create a framed card or photo effect.