Border Images

Border Images

Use an IMAGE instead of a plain line for your border.

border-image-source

Point to the image:

.box {
  border: 15px solid transparent;      /* frame space */
  border-image: url(border.png) 30 round;
}

The 9-slice model

The image is sliced into 9 parts: 4 corners stay fixed, edges stretch or repeat, center is optional.

.box {
  border-image-source: url(borders.png);
  border-image-slice: 30;      /* how many px from each edge */
  border-image-repeat: round;  /* stretch | repeat | round */
  border-image-width: 20px;
  border-image-outset: 0;
}

Repeat keywords

• stretch: draw each edge once, stretching.
• repeat: tile the edges.
• round: tile AND rescale so they fit evenly (no clipping).

TL;DR

• border-image = image-based border.
• Slice with border-image-slice (sets the 9-box model).
• repeat: stretch | repeat | round.
• Set a border width first, else nothing shows.
• Corners use box, edges stretch/tile.