CSS3 Border Images

CSS Border Images

The CSS `border-image` property allows you to use an image as the border around an element, offering creative styling possibilities beyond simple solid or dashed lines.

Browser Support

The border-image property is now widely supported by all modern web browsers. Vendor prefixes are no longer necessary for this feature.

How border-image Works: The 9-Slice Grid

The border-image property works by taking a source image and slicing it into nine sections, like a tic-tac-toe grid:

1. Four corner sections.
2. Four edge sections (top, right, bottom, left).
3. One middle section.

The browser then applies these sections to the element’s border area:

• The corner sections are placed at the corners of the element’s border.
• The edge sections are repeated, scaled, or stretched along the edges.
• The middle section is typically discarded or used to fill the background if specified (fill keyword).

Important Note: For border-image to work correctly, the element usually needs a border-style other than none and a border-width. Often, a transparent border is used (border: 10px solid transparent;) to define the area where the border image will be drawn without showing a solid color underneath.

Key Properties

The border-image property is a shorthand for several individual properties:

• border-image-source: Specifies the path to the image (url(...)).
• border-image-slice: Defines how to slice the image (using numbers or percentages).
• border-image-width: Sets the width of the border image (can differ from border-width).
• border-image-outset: Specifies the amount the border image extends beyond the border box.
• border-image-repeat: Controls how the edge sections are tiled (stretch, repeat, round, space).

Examples

Using round for Edge Tiling:

The round value repeats the edge tiles, adjusting their size slightly to fit perfectly without clipping.

/* Assume border.png is an image suitable for slicing */
#border-img-round {
  border: 30px solid transparent; /* Define area for image */
  padding: 15px;
  border-image-source: url('border.png');
  border-image-slice: 30; /* Slice 30px in from each edge */
  border-image-repeat: round; /* Tile edges by rounding */
  width: 200px;
  height: 100px;
  background-color: lightyellow; /* Show background behind padding */
}

Using stretch for Edge Tiling:

The stretch value scales the edge tiles to fill the space.

/* Using the shorthand property */
#border-img-stretch {
  border: 20px solid transparent;
  padding: 15px;
  border-image: url('border.png') 25 stretch; /* source slice repeat */
  /* border-image-slice is 25, border-image-repeat is stretch */
  width: 200px;
  height: 100px;
  background-color: lightcyan;
}

Using Percentages for Slicing:

Percentages for border-image-slice are relative to the source image dimensions.

#border-img-percent {
  border: 25px solid transparent;
  padding: 15px;
  border-image-source: url('another-border.png');
  border-image-slice: 20%; /* Slice 20% in from edges */
  border-image-repeat: repeat; /* Tile edges by repeating */
  width: 250px;
  height: 120px;
  background-color: lavender;
}

CSS Border Image Properties Summary

Property	Description
border-image	Shorthand for setting border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat.
border-image-source	Specifies the path to the image to be used as a border.
border-image-slice	Specifies how to slice the source image into regions.
border-image-width	Specifies the width (thickness) of the border image.
border-image-outset	Specifies the amount by which the border image area extends beyond the border box.
border-image-repeat	Specifies how the edge regions of the source image are adjusted (stretch, repeat, round, space).

Explore interactive examples and details on MDN: [https://developer.mozilla.org/en-US/docs/Web/CSS/border-image](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image)