Border Image Generator

This tool generates CSS `border-image` declarations from five inputs: source, slice, width, outset, and repeat mode. The source accepts any valid `border-image-source` value such as `url(border.png)` or any CSS gradient. A live preview box renders the result on a `20px solid transparent` border, and the output is shown both as the shorthand and as the longhand properties.

1. Set Source to a gradient or `url(...)`. Default is `linear-gradient(45deg, #f3ec78, #af4261)`. 2. Set Slice (default `1`), Width (default `20px`), and Outset (default `0`). 3. Pick a Repeat mode: stretch, repeat, round, or space. 4. Preview updates live. 5. Click Copy to copy the full CSS block, or Download to save it as `border-image.css`.

Shorthand emitted: `border-image: <source> <slice> / <width> / <outset> <repeat>;`. The full block also lists `border-image-source`, `-slice`, `-width`, `-outset`, `-repeat` individually and includes the required `border: 20px solid transparent;` baseline. Repeat modes: `stretch` (default, scales the sides), `repeat` (tiles without scaling), `round` (tiles and stretches to fit whole tiles), `space` (tiles with extra space distributed).