Css border image generator

border-image is a CSS property that lets you use an image - rather than a solid colour or style - as the border of any element. It works by dividing the source image into a 3×3 grid of nine sections using four slice lines. The four corner sections are placed at the element's corners and stay fixed, while the four edge sections can repeat, stretch, or scale to fit the element's dimensions. The centre section can optionally fill the content area. It is a shorthand for five individual properties: border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat.

border-image-slice defines where the source image is cut to create the nine-section grid. It accepts up to four values - one for each edge: top, right, bottom, left - as either percentages of the image dimensions or unitless pixel numbers. For example, border-image-slice: 30% cuts 30% in from each edge, leaving a central region that is 40% of the image's width and height. Adding the fill keyword at the end causes the centre section to be rendered inside the element's content area rather than discarded.

When you use percentages, the slice positions are calculated relative to the image's own dimensions - so a 30% slice on a 200px-wide image cuts at 60px from the edge. When you use unitless numbers (no px unit), they are treated as pixel values measured in the image's intrinsic coordinate space. Percentages are generally better for responsive designs where the same border image might be applied to elements of varying sizes, while pixel values are useful when your image has specific decorative elements at exact positions you want to align precisely.

The border-image-repeat property controls how the edge sections of the sliced image are rendered to fill the border area. stretch scales each edge section to fill the available space - it is the default and can distort the image. repeat tiles the section repeatedly from the centre outward, which may result in clipped tiles at the ends. round is like repeat but scales the tiles slightly so they fit perfectly without any clipping - the number of tiles is always a whole number. space also uses whole tiles but instead of scaling them it distributes any leftover space evenly as gaps between tiles.

border-width sets the physical space the border occupies in the layout - it affects how surrounding elements are positioned. border-image-width specifically controls how wide the border image is rendered within that space, expressed as a multiple of border-width (so 1 means the same size, 2 means double). You can set border-image-width larger than border-width to make the image appear bigger without affecting layout, or use it with border-image-outset to push the image beyond the element's border box entirely.

border-image-outset pushes the border image outward beyond the border box, allowing it to extend into the padding area or even outside the element's bounds entirely. It accepts length values (px, em, etc.) or unitless numbers (multiples of border-width). The outset does not affect layout - it does not push surrounding elements away - so it is purely a visual extension. This makes it useful for decorative effects like glows, frames, or ornamental borders that need to visually break out of the element's normal boundary.

The most common reason is a missing border-style declaration. Even when using border-image, the element still needs border-style: solid (or any non-none value) and a non-zero border-width set - otherwise the browser reserves no space for the border and the image has nowhere to render. Other things to check: make sure the image URL is correct and loading successfully; ensure border-image-slice is set and not slicing the image down to nothing; and confirm the element itself is visible and not hidden by overflow: hidden on a parent.

Yes. The border-image-source property accepts any CSS image value, which includes gradients. For example: border-image-source: linear-gradient(to right, red, blue); will use a red-to-blue gradient as the border image. Because gradients have no intrinsic dimensions, border-image-slice values should be set as percentages rather than pixel numbers when using them. This technique is commonly used to create gradient-coloured borders that are not possible with the standard border-color property alone.

Unfortunately, no. border-image and border-radius do not work together - when both are applied to the same element, border-image overrides and the rounded corners are ignored. This is a known CSS limitation. If you need both a decorative image border and rounded corners, common workarounds include using a wrapper element with border-radius and overflow: hidden, using outline or box-shadow for a simple rounded border effect, or using an SVG or pseudo-element approach to simulate the appearance.

border-image has excellent browser support and works in all modern browsers: Chrome, Firefox, Safari, Edge, and Opera - with no vendor prefixes required. Support has been solid since Chrome 16, Firefox 15, Safari 6, and Edge 12, so for any website targeting browsers released in the last several years it is completely safe to use in production without fallbacks. Internet Explorer 11 has partial support and may require the older -webkit- prefixed syntax for some sub-properties, but IE 11 is no longer a meaningful target for most projects.

PNG is the most common choice because it supports transparency, which allows the element's background to show through the centre and any transparent areas of the border design. SVG also works very well - it scales perfectly at any border size without pixelation, making it ideal for geometric or line-based border patterns. JPEG works for photographic border textures where transparency is not needed. For best results, use a high-resolution source image (at least 400×400px for raster formats) so the corner sections remain sharp even when the border width is large.