Gerador de Imagens de Borda

Esta ferramenta gera declarações CSS `border-image` a partir de cinco entradas: origem, slice, largura, outset e modo de repetição. A origem aceita qualquer valor válido `border-image-source` como `url(border.png)` ou qualquer gradiente CSS. Uma visualização ao vivo renderiza o resultado em uma borda `20px solid transparent`, e a saída é mostrada tanto em forma abreviada quanto em propriedades individuais.

1. Defina Origem para um gradiente ou `url(...)`. Padrão é `linear-gradient(45deg, #f3ec78, #af4261)`. 2. Defina Slice (padrão `1`), Largura (padrão `20px`) e Outset (padrão `0`). 3. Escolha um modo de repetição: stretch, repeat, round ou space. 4. A visualização é atualizada ao vivo. 5. Clique em Copiar para copiar o bloco CSS completo, ou Download para salvar como `border-image.css`.

Abreviação gerada: `border-image: <source> <slice> / <width> / <outset> <repeat>;`. O bloco completo também lista `border-image-source`, `-slice`, `-width`, `-outset`, `-repeat` individualmente e inclui a base necessária `border: 20px solid transparent;`. Modos de repetição: `stretch` (padrão, escala os lados), `repeat` (azuleja sem escalar), `round` (azuleja e estica para caber azulejos inteiros), `space` (azuleja com espaço extra distribuído).