CSS Border Image Generator
Adjust width, slice, repeat and gradient — get ready-to-use CSS border-image code instantly, 100% in your browser.
Controls
Preview
CSS Code
What is the CSS border-image property?
The CSS border-image property lets you decorate an element border with an image or gradient instead of a solid color. It is a shorthand that combines border-image-source (the image or gradient), border-image-slice (how the image is divided into regions), border-image-width, border-image-outset, and border-image-repeat (how the slices are tiled or stretched). With gradients, you can create vibrant, multi-color borders without needing an external image file.
Border-image is supported by all modern browsers and is especially useful for creating decorative frames, gradient borders, and pattern-based outlines that go beyond what solid colors can achieve.
Border-image slice explained
The border-image-slice property divides the source image (or gradient) into nine regions: four corners, four edges, and a center. The slice value determines where these cuts happen. A higher slice percentage means more of the image is used for the corners, while a lower percentage means the edges stretch more. With a gradient source, the slice controls how much of the gradient is allocated to the border regions versus the center.
Experimenting with different slice values dramatically changes the appearance: a slice of 50% gives equal weight to corners and edges, while a slice of 10% makes the gradient mostly visible in the stretched edge regions.
Border-image repeat modes
The border-image-repeat property controls how the edge regions of the image are tiled along the border. CSS offers four modes, each producing a different visual effect:
| Mode | Behavior |
|---|---|
| stretch | Stretches the edge regions to fill the border (default) |
| repeat | Tiles the edge regions, may cut at the midpoint |
| round | Tiles and scales so regions fit a whole number of times |
| space | Tiles with extra space distributed evenly, no scaling |
For gradients, stretch usually produces the smoothest result because the gradient blends seamlessly across the border. round and repeat can create interesting patterned effects.
When to use border-image
Border-image is ideal whenever you need a border that is more decorative than a simple solid color. Common use cases include gradient borders for hero sections, decorative frames around images or cards, patterned borders for callout boxes, and themed borders that match a brand palette. It is also useful for creating responsive decorative elements, since the border scales with the element without distortion (in stretch mode).
However, border-image is not ideal when you need precise control over each individual side — for that, use individual border properties. Border-image applies uniformly to all four sides.
How to generate border-image
This tool lets you design border-image visually: set the border width, adjust the slice percentage, choose a repeat mode, and pick two gradient colors with an angle. The preview updates in real time, and the CSS code is generated automatically. Click Copy CSS to get the code and paste it into your stylesheet.
Everything runs locally in your browser — no data is sent to any server, so your design choices are completely private.
How do I create a gradient border in CSS?
Use border-image: linear-gradient(45deg, #0ea5e9, #86efac) 30; with a border width set. The gradient becomes the border source.
What does border-image-slice do?
It divides the image or gradient into nine regions. The value controls how much goes to corners versus edges. Higher values give more to corners.
Which repeat mode is best for gradients?
stretch usually gives the smoothest result for gradients because it blends seamlessly across the border without visible tiling.
Are my inputs uploaded to a server?
No. All processing is local. Your color and style choices never leave your browser.