Free · Fast · Privacy-first

CSS border-image Generator

The border-image property replaces the standard border color with any image, including SVGs, PNGs, and CSS gradients.

⚡

Configure border-image-source, slice, repeat, and width

🔒

Live preview of image slicing across border corners and edges

✨

Supports gradient sources and external image URLs

⚡

Generates complete border-image shorthand declaration

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Border Builder to your website

Drop the Border Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/border-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Border Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/border-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Border Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

Border-Image Source, Slice, Repeat: How Image Borders Work

Border-image-source sets what image the border uses. It accepts any CSS image value: url() for external files, linear-gradient(), radial-gradient(), conic-gradient(), or element() for live element captures. The image is then divided into nine regions by border-image-slice. The four corner regions paint the border corners; the four edge regions tile or stretch along each border side; the center region is discarded by default unless you add the fill keyword. For a simple gradient border, the source is the gradient and the slice is 1, which tells the browser to use 1 pixel from each edge as the cutting boundary.

Border-image-slice is the most misunderstood part of border-image. It accepts one to four values that define how many pixels (or what percentage of the image) to slice from each edge. For a 90x90px SVG image border, border-image-slice: 30 cuts 30px from each edge, leaving a 30x30px center. The 30px corner regions go to the four corners; the remaining edge strips tile or stretch across each side. For raster images designed as border frames, the slice values correspond to the visual corner size in the image. For gradients, slice: 1 works universally because a 1-unit slice from a generated gradient captures the color information correctly.

Border-image-repeat controls how edge regions fill the border sides between corners. Stretch is the default and scales the edge strip to fill the entire side without repetition. Round tiles the edge region and resizes the tiles to fit without partial tiles at the ends. Space also tiles but adds spacing between tiles rather than resizing them. Repeat tiles the edge strip without adjustment, which may produce partial tiles at the ends. For decorative SVG borders with pattern edges, round is usually the best choice. For gradient borders, stretch is always correct because gradients scale without visible artifacts.

Border-image and clip-path occupy adjacent but non-overlapping territory in CSS, and choosing between them depends on what you sacrifice. Border-image paints an image inside the element's border region while leaving the content area, focus ring, and box-shadow behaviour intact. Clip-path produces non-rectangular shapes (hexagons, arrows, speech bubbles) that border-image cannot reach, but at the cost of losing the visible border outline, the box-shadow rendering, and the default focus indicator that browsers draw via outline. For any shape that can be expressed as a rectangle with possibly rounded corners, border-image with a gradient or SVG source is the right tool because it preserves accessibility and layered rendering. Reach for clip-path only when the shape genuinely cannot be expressed with border-radius, and be prepared to reconstruct shadows (via filter: drop-shadow on a wrapping element) and focus indicators (via a sibling or pseudo-element) by hand. The combined complexity is usually higher than designers expect.

MDN: border-image MDN: border-image-slice

How to use this tool

💡

Enter a gradient or image URL as the source, set slice to 1 for gradients or 30% for raster images, and choose stretch or round for repeat. Set border-width to 4px or higher to see the border-image clearly. Adjust slice values to control corner versus edge regions.

How It Works

Step-by-step guide to css border-image generator:

1
Set the border-image source
Enter a gradient function or image URL. For gradients, use linear-gradient() with your colors. For raster images, use url() with an absolute path or hosted URL.
2
Configure border-image-slice
For gradients, set slice to 1. For raster images, set slice to the corner region size in pixels (matching the corner decoration size in your image).
3
Choose border-image-repeat
Select stretch for gradients and smooth textures. Use round for patterned edge regions that need complete tiles. The preview shows how each option looks on the element.
4
Set border-width
Set border-width to the visual border thickness you want. For image borders, 4px to 20px is common depending on the decoration. Ensure border-style is set to solid to activate the border area.

Real-world examples

Common situations where this approach makes a real difference:

Gradient border on a pricing card

A featured pricing plan card uses border-image: linear-gradient(135deg, #6366f1, #ec4899) 1 with border-width: 2px to display a gradient border. The gradient transitions from indigo to pink, creating a colorful accent that distinguishes the featured card from the standard bordered cards. Setting border-radius alongside border-image is not supported, so this technique works best on flat-cornered cards.

SVG ornamental frame border

A certificate or award template uses an SVG ornamental border image. The SVG is designed with decorated corners and plain edges. Setting border-image: url(ornament-border.svg) 60 round allocates 60px to each corner region and tiles the edge regions with the round mode to avoid partial patterns. This creates a scalable decorative frame that works at any certificate size.

Progress indicator border on a loading card

A data loading card shows progress using border-image: linear-gradient(to right, #6366f1 var(--progress), #e5e7eb var(--progress)) 1 where --progress is a CSS custom property updated by JavaScript. At 0%, the border is all gray. At 100%, it is all indigo. The transition between states animates with CSS transition on the custom property if registered with @property.

Striped pattern border using repeating gradients

A construction-style warning pattern uses border-image: repeating-linear-gradient(45deg, #f59e0b 0, #f59e0b 10px, #000 10px, #000 20px) 20 round as a border. The 45-degree diagonal stripes alternate between amber and black at 10px intervals. Setting border-width: 20px makes the stripes clearly visible. This pattern is used for draft-mode indicators and blocked content placeholders.

Pro tips

Get better results with these expert suggestions:

Use SVG borders for scalable decorative frames

SVG files scale without pixelation, making them ideal for border-image sources on elements of varying sizes. A corner-decorated SVG frame border stays crisp at any element size. Design the SVG at a standard size like 90x90px with 30px corners, then set border-image-slice: 30 and border-image-width: 30px. The SVG corners render at full quality at any resolution.

Border-image-outset extends the border outside the element box

Setting border-image-outset: 4px expands the rendered border image 4px beyond the element's border box in all directions. The border occupies space in the overflow area rather than the layout flow, similar to how a negative outline-offset works. This is useful for decorative frames or glowing borders that should appear larger than the physical border-width.

Test border-image on different element aspect ratios

Edge regions stretch or tile to fill the border sides, which means the appearance of patterned borders changes with the element's aspect ratio. Test your border-image on both wide and tall elements to confirm the edge regions look correct in both orientations. Some patterns that look fine on a square element become distorted on a very wide or very tall element.

Use border-image to create a progress bar style border

A linear-gradient that covers only part of the border length can simulate a partial-fill progress border. Setting border-image: linear-gradient(to right, #6366f1 60%, #e5e7eb 60%) 1 paints the gradient at 60% indigo and 40% gray, creating a progress indicator on the border. Updating the percentage via JavaScript simulates progress animation.

Design SVG border images at 3x the corner size

When creating an SVG for use as a border image, make the canvas size at least 3x the intended corner size in each dimension. A 90x90px SVG with a 30px border means each corner region is 30x30px, giving enough detail for the corner decoration. Set border-image-slice to 30 to match.

Use border-image-width to override border-width for painting

Border-image-width sets the painted width of the border image independently of border-width. Setting a larger border-image-width stretches the image into the content or padding area. This is distinct from border-width, which controls layout space allocation. Use border-image-width when the visual weight of the image border needs to differ from the space allocated for it.

Add fill to show the center region

By default, border-image discards the center region of the sliced image. Adding fill to border-image-slice causes the center to paint over the element's background. This is useful for image-framed content boxes where the frame design includes a center texture or color that should fill the content area.

FAQ

Frequently asked questions

Border-image-slice defines how the border-image source is divided into nine regions: four corners, four edges, and one center. The values specify how many pixels (or what percentage of the image) to cut from each edge to create these regions. This value is required because without it the browser cannot determine where the corners end and the edges begin. For gradient sources, a slice of 1 works universally. For raster images, the slice should match the pixel size of the corner decoration in the source image.

The CSS specification defines that border-image takes precedence over border-radius for border rendering. When both are set, the border-image renders with rectangular corners. There is no CSS way to combine border-image with border-radius directly. The workaround is the background-clip two-layer technique: set a transparent solid border for width, then use background with a gradient in the border-box layer and a solid color in the padding-box layer. This achieves a gradient border effect that respects border-radius.

Stretch scales the edge region of the sliced image to fill the entire border side without tiling. Round tiles the edge region and adjusts the tile size so complete tiles fit without partial cuts at the ends. Repeat tiles the edge region at its natural size, which may produce partial tiles at the ends where the edge length is not an exact multiple of the tile size. Space tiles the edge region and distributes remaining space as gaps between tiles. For gradient sources, stretch is always correct. For patterned SVG borders, round is usually the best choice.

Reference the SVG with border-image-source: url(path/to/border.svg). The SVG should be designed as a nine-patch image with distinct corner regions and edge strips. Set border-image-slice to the pixel size of the corner regions in the SVG. For example, if the SVG is 90x90px and each corner decoration occupies 30x30px, use border-image-slice: 30. SVG sources scale without pixelation, making them ideal for high-DPI displays.

By default, border-image-slice discards the center region of the sliced image and only uses the four corners and four edges. Adding the fill keyword to the slice value, such as border-image-slice: 30 fill, paints the center region over the element's background. This is useful when the border image includes a background texture or color in the center that should fill the content area. Without fill, the element's background-color or background-image shows through the center.

Border-image itself is not directly animatable as a whole because it is a complex shorthand property. However, if the source is a CSS gradient using registered @property custom properties, those color values can be transitioned. For gradient borders using CSS variables registered with @property as color types, you can add transition: --variable-name 0.3s ease and animate between gradient colors. Without @property, gradient stop colors cannot be transitioned because the browser treats the gradient string as an opaque non-interpolatable value.

Yes. When border-image is set, it completely overrides border-color for the visual rendering of the border. Border-color is ignored visually but border-width and border-style must still be set for the border-image to have space to paint into. This means border-image serves as a progressive enhancement: setting border-color first provides a fallback for browsers that may not support border-image (though all modern browsers do), and border-image overrides it when supported.

Border-image-outset specifies how far the border image extends beyond the element's border box. A value of border-image-outset: 4px makes the rendered border image 4px larger on each side than the border-width would suggest, extending into the margin area. This is useful for decorative or glowing borders that should appear physically larger without changing the element's layout size. Outset values are part of the border-image shorthand and are written after a slash following the slice value. Note that outset does not affect the element's computed margin box, so adjacent elements continue to position themselves against the unexpanded border edge, which is exactly the behaviour you want for decorative outset frames.

Border-image paints inside the element's border region, while box-shadow paints outside the border box. The two layers stack cleanly in principle, but small shadow offsets can sit partly behind a thick border-image and become hard to see. The reliable approach is to make the shadow offset larger than the border-width, or to use spread instead of offset so the shadow extends uniformly on all sides. Border-image-outset complicates this further: a positive outset pushes the border-image outward into the area where the shadow would otherwise sit, effectively hiding more of the shadow. If the design uses outset, compensate by increasing the shadow spread by the same amount. A two-layer shadow (a tight close shadow plus a softer wider one) reads better than a single heavy shadow because the border-image is already the prominent visual element and the shadows should suggest depth without competing for attention.

Border-image cannot produce non-rectangular shapes. It paints into the rectangular border region of an element, divided into nine regions by the slice value. Hexagonal or arrow-shaped frames need clip-path or SVG masking, neither of which composes cleanly with border-image. The standard approach for a hexagonal bordered shape is to use clip-path on the outer element to create the hex outline, with a slightly inset child element using the same clip-path inset by a few pixels to form the inner content area. The visible gap between the two clipped layers becomes the border. This works but loses the ability to use box-shadow (it gets clipped too) and the native focus outline (also clipped). For rectangular and rounded shapes, border-image remains simpler and preserves all the surrounding rendering features.