Border-image-generator

Deze tool genereert CSS-`border-image`-declaraties uit vijf invoeren: bron, slice, breedte, outset en herhaalmodus. De bron accepteert elke geldige `border-image-source`-waarde zoals `url(border.png)` of elke CSS-gradient. Een live voorbeeldbox render het resultaat op een `20px solid transparent` rand, en de uitvoer wordt zowel als afkorting als als afzonderlijke eigenschappen getoond.

1. Stel Bron in op een gradient of `url(...)`. Standaard is `linear-gradient(45deg, #f3ec78, #af4261)`. 2. Stel Slice (standaard `1`), Breedte (standaard `20px`) en Outset (standaard `0`) in. 3. Kies een herhaalmodus: stretch, repeat, round of space. 4. Het voorbeeld wordt live bijgewerkt. 5. Klik op Kopiëren om het volledige CSS-blok te kopiëren, of Downloaden om op te slaan als `border-image.css`.

Afkorting: `border-image: <source> <slice> / <width> / <outset> <repeat>;`. Het volledige blok list ook `border-image-source`, `-slice`, `-width`, `-outset`, `-repeat` afzonderlijk en bevat de vereiste `border: 20px solid transparent;` basis. Herhaalmodi: `stretch` (standaard, schaalt de zijden), `repeat` (tegelt zonder schalen), `round` (tegelt en rekt uit om hele tegels te passen), `space` (tegelt met extra ruimte verdeeld).