Border-bildegenerator

Dette verktøyet genererer CSS `border-image` deklarasjoner fra fem inndata: source, slice, width, outset og repeat-modus. Source aksepterer alle gyldige `border-image-source` verdier som `url(border.png)` eller enhver CSS gradient. En live forhåndsvisningsboks gjengir resultatet på en `20px solid transparent` kant, og utdataene vises både som shorthand og som longhand egenskaper.

1. Sett Source til en gradient eller `url(...)`. Standard er `linear-gradient(45deg, #f3ec78, #af4261)`. 2. Sett Slice (standard `1`), Width (standard `20px`) og Outset (standard `0`). 3. Velg en Repeat-modus: stretch, repeat, round eller space. 4. Forhåndsvisning oppdateres live. 5. Klikk Kopier for å kopiere hele CSS-blokken, eller Last ned for å lagre den som `border-image.css`.

Shorthand sendt ut: `border-image: <source> <slice> / <width> / <outset> <repeat>;`. Hele blokken lister også `border-image-source`, `-slice`, `-width`, `-outset`, `-repeat` individuelt og inkluderer den nødvendige `border: 20px solid transparent;` baseline. Repeat-moduser: `stretch` (standard, skalerer sidene), `repeat` (fliser uten skalering), `round` (fliser og strekker for å passe hele fliser), `space` (fliser med ekstra plass distribuert).