Pixel Art 9-Slicer
with CSS export
Pixel scale
2×
Center fill method
Each control maps directly to a CSS border-image property.
Controls how large each source pixel appears on screen. At 2× every pixel becomes a 2×2 block, at 3× a 3×3 block, and so on.
Pixelated tells the browser to scale the image with nearest-neighbour sampling instead of the default linear blur, keeping pixel edges sharp and blocky instead of soft.
The slice carves your image into 9 regions: 4 fixed corners and 4 edge strips plus a center, all sized in source pixels. The box you're styling is almost never exactly that size, so each edge strip has to be stretched, tiled, or spaced out to cover the gap. This setting decides which of those four strategies gets used, and it's the part of border-image that trips people up most, so here's each mode in concrete terms:
Stretch squashes or stretches the strip like a rubber image to exactly match the available length. It always fills perfectly with no seams, but a pixel-art pattern (dots, bricks, ticks) will smear or distort if the fit isn't a clean multiple of the source size.
Repeat places the strip at its true source size and tiles it end to end. If the available length isn't an exact multiple, the last tile gets cut off mid-pattern, leaving a visible partial tile at one end.
Round also tiles at (roughly) true size, but the browser quietly nudges each tile's width so a whole number of tiles always fits exactly, with no cut-off tile. This is usually the best default for repeating pixel-art borders, since you trade a near-invisible per-tile stretch for never seeing a clipped pattern.
Space keeps every tile at its exact true size with no stretching at all, perfectly crisp, and instead inserts equal gaps between tiles so the whole row still fills the available length, the way books get spaced out unevenly to fill a shelf.
Horizontal sets this behavior for the top and bottom edges. Vertical sets it for the left and right edges. They're independent settings, so each side of the frame can use a different mode if needed.
Fill center is separate from the repeat behavior: when checked, the center region is painted using the source image too, tiled or stretched according to the same horizontal and vertical settings above.