CSS border-image with a Base64 Data URI: Syntax and Examples

Base64 in CSS border-image

border-image slices an image into nine parts and uses them to draw an element's border. A small Base64 image keeps the decoration self-contained.

Example

.fancy-frame {
  border: 12px solid transparent;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAK...") 30 round;
}

A border-style (for example solid) must be set, otherwise the border image is not drawn.
The slice value (30 above) is in image pixels for raster images.

Questions, ideas or a bug in “Base64 in CSS border-image”? Leave a comment, rate the tool, or reply to others.

No comments yet. Be the first to share your feedback!