Overview
A border decorator with two engines: a gradient border built from two clipped backgrounds, and classic solid or dashed borders with six line styles. Gradient mode stacks a padding-box background over a border-box gradient so the border area shows the gradient while the interior stays solid, and corner radius keeps working, which the real border-image property cannot offer.
How It Works
Toggle between Gradient border and Solid / dashed modes. In gradient mode pick the start and end colors; in solid mode also choose a style among solid, dashed, dotted, double, groove and ridge, and the second color field becomes the border color. Drag the border width from 1 to 20 pixels and the corner radius from 0 to 48 pixels. The preview box shows the framed result, and the output panel emits a .fancy-border class for the mode you selected.
Step-by-Step Usage Guide
- Choose gradient border or solid / dashed mode.
- Pick the colors, and a line style in solid mode.
- Set the border width and corner radius.
- Copy the .fancy-border class.
Technical Specifications & Standards
Gradient mode does not use border-image at all. It sets a transparent border of your chosen width and layers two backgrounds: a solid linear-gradient of the surface color clamped to padding-box, painted over a second gradient spread across border-box. The outer band that remains visible is your gradient border, and because the effect is ordinary backgrounds, border-radius rounds it cleanly. That detail is the whole point: per MDN, border-radius has no effect on a real border-image, so border-image gradients always end in square corners. The emitted CSS fills the interior with var(--bg, #fff), so on pages that do not define --bg the fallback white shows through; swap the fallback if your surface is dark. Solid mode is a plain border shorthand plus radius, with the classic styles including the bevelled groove and ridge lines.
Targeted Use Cases
- Rounded gradient frames for feature cards and callouts.
- Focus-ring-like accents around form panels.
- Groove and ridge borders for retro or skeuomorphic UI.
- Highlighted cards where the border itself is the brand accent.
Notes & Gotchas
- Prefer the two-background technique over border-image whenever the corners must be rounded.
- Adjust the var(--bg, #fff) fallback in the copied CSS to match your actual surface color.
- Keep border widths moderate; wide transparent borders eat padding and can crowd content.
- Do not stack a box-shadow directly on gradient borders without testing, since the shadow follows the rounded box while the gradient band may contrast sharply.
Frequently Asked Questions
Why not just use the border-image property for gradients?
Because border-image ignores border-radius: MDN documents that border-radius has no effect on the border image, so gradient borders drawn with it always have square corners. This tool layers a padding-box background over a border-box gradient instead, which rounds correctly.
What is var(--bg, #fff) doing in the output?
The interior of the box is painted with your page background color so the gradient shows only in the border band. The fallback #fff applies when the --bg variable is not defined; change it if your surface is not white.
Which line styles are available in solid mode?
Solid, dashed, dotted, double, groove and ridge, with any width from 1 to 20 pixels and any color. Groove and ridge simulate engraved or raised edges with light and dark edges drawn by the browser.
Does the gradient border work with border-radius on every browser?
Yes. The technique is just two background layers with different clip regions, and both background-clip values and border-radius have been supported everywhere for years, including mobile.