CSS Border Image Generator Tool

CSS Border Image Generator

Create beautiful border images with this easy-to-use tool

Configuration

Image

Gradient

Image URL

Preset Images

Preset 1

Preset 2

Preset 3

Preset 4

Gradient Type Linear Gradient Radial Gradient Conic Gradient

Direction To Right To Bottom To Left To Top 45deg 135deg

Shape (Radial Only) Circle Ellipse

Color 1

Color 2

Custom Gradient Input

Gradient Presets

Border Image Slice

Slice (All sides) 30%

Individual Sides

Top 30%

Right 30%

Bottom 30%

Left 30%

Border Image Width

Width (All sides) 30px

Individual Sides

Top 30px

Right 30px

Bottom 30px

Left 30px

Border Image Outset

Outset (All sides) 0px

Individual Sides

Top 0px

Right 0px

Bottom 0px

Left 0px

Other Properties

Repeat stretch repeat round space

Live Preview

This is a preview of your border image

CSS Code

#element {
  border-image-source: url('https://mdn.github.io/css-examples/tools/border-image-generator/border-image-1.png');
  border-image-slice: 30%;
  border-image-width: 30px;
  border-image-outset: 0px;
  border-image-repeat: stretch;
}

CSS copied to clipboard!

Created with ❤️ | CSS Border Image Generator Tool © 2025