Frame It with Border Image Generator
The **Border Image Generator** demystifies one of the most confusing properties in CSS 3: `border-image`. This property allows you to use an image file to effectively "paint" the border of a box, stripping away the standard solid or dashed lines in favor of custom graphics, gradients, or pixel art.
Understanding 9-Slice Scaling
The core concept is the "9-slice scaling" grid. The image is divided into 9 regions: 4 corners, 4 edges, and a center. This tool helps you define the slice offsets so that:
- Corners remain unscaled (preserving detail like rounded edges).
- Edges can stretch or repeat (tile) to fill the variable width/height.
- Center is optionally filled or discarded (transparent).
Use Cases
This aesthetic is seeing a resurgence with:
- Retro/Pixel Art: Perfect for game UI or 8-bit themes.
- Decorative Frames: Vintage photo frames or ornate certificate borders.
- Gradient Borders: Using a gradient image source to create rainbow borders.
How to Use
- Upload an image or use a preset.
- Adjust the 'Slice' lines to define the corners.
- Choose 'Stretch' or 'Repeat' for the edges.
- Copy the CSS.
Technical & Privacy Note
Local slicing. The **Border Image Generator** from **Online Tool Base** processes images in your browser.