Skip to content
ToolQivo

Gradient Border Generator

Put a gradient on a border — and keep the rounded corners.

Color Tools Reviews Free · no sign-up

The border

CSS 
The CSS appears here

Quick Tool Overview

The Gradient Border Generator produces all three techniques from the same settings — border-image, the double-background trick and the mask approach — so the corner-radius problem is visible rather than described.

What it does
Builds gradient borders three ways
You give it
A gradient, a border width and a radius
You get back
All three techniques, previewed and compared
Best for
Cards, buttons and highlighted panels
Color Tools Free, unlimited use No sign-up Runs in your browser

About the Gradient Border Generator

A gradient border sounds simple and is not, because border-color takes a colour and a gradient is an image. There are three ways around it, and they have different trade-offs — this generates all three so you can take the one that fits.

border-image is the direct answer and the shortest code, but it ignores border-radius entirely: the corners come out square no matter what you set. The double-background technique — a padding box in your surface colour over a border box holding the gradient — keeps the radius perfectly and is what most design systems use. The mask approach handles the hardest case, a gradient border on a transparent element, at the cost of slightly more CSS.

All three are previewed live with the same settings, so you can see the corner difference rather than read about it, and each comes with the browser support note that decides it.

Key features of the Gradient Border Generator

The radius problem shown

border-image ignores border-radius entirely. Seeing the square corners next to the round ones settles the choice in a second.

The double-background trick

Two backgrounds with different clip boxes — the method most design systems use, and the one that keeps the radius.

A mask version

For the hard case: a gradient border on an element that has to stay transparent.

Every gradient type

Linear, radial and conic, including the rotating conic border.

Support notes

Each technique carries the browser note that actually decides which one you use.

How to use the Gradient Border Generator

  1. 1

    Set the gradient

    Colours, angle and type — linear, radial or conic.

  2. 2

    Set the border

    Width and corner radius, which is where the techniques differ.

  3. 3

    Compare the three

    The same settings rendered by each method, side by side.

  4. 4

    Copy the one you need

    Each comes with its browser support note.

Frequently asked questions

Because you are using border-image, which does not respect border-radius — this is specified behaviour, not a bug. Use the double-background or mask technique instead.

Reviews of the Gradient Border Generator

What people who use the Gradient Border Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Gradient Border Generator. It takes half a minute and no account.

Write the first review

More color tools