Your Element

CSS Gradient Border: Complete Guide

CSS doesn't have a native gradient-border property — you can't just write border: 2px solid linear-gradient(...). But there are two reliable techniques that produce the effect, both supported across every modern browser. The generator above handles both. Pick a gradient type, set color stops, choose your border width and corner radius, and copy the code.

How to Use This Gradient Border Generator

  1. Pick gradient type — Linear for directional gradients (sunset, neon, brand fades) or Conic for sweeping rainbow effects.
  2. Add color stops — Click "+ Add Color Stop" to layer colors. Drag the position slider on each stop to space them.
  3. Tune width and radius — Most modern UI uses 1–4px borders with 8–24px corner radius. Conic gradients look great with thicker borders.
  4. Pick a method — background-clip (default) supports rounded corners; border-image has wider gradient pattern support but no border-radius.
  5. Copy the code — Switch between CSS, Tailwind and SCSS tabs and paste into your project.

The background-clip Method (rounded corners supported)

The trick: set a transparent border, then layer two backgrounds — a solid one clipped to padding-box on top, and a gradient clipped to border-box underneath. The transparent border is filled by the gradient layer that bleeds through.

.gradient-border {
  border: 3px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(#0a0a0f, #0a0a0f) padding-box,
    linear-gradient(135deg, #7c6fff, #ff6fb0) border-box;
}

This is the technique most modern UI uses because it respects border-radius. The downside: the inner background must be a solid color you specify — it won't show whatever's behind the element naturally.

The border-image Method

Native CSS for gradient borders, but with a catch: border-image ignores border-radius. Use this when you want straight rectangular borders or repeating gradient patterns.

.gradient-border-image {
  border: 3px solid;
  border-image: linear-gradient(135deg, #7c6fff, #ff6fb0) 1;
}

The 1 at the end is the slice value — it tells the browser to use the entire gradient as a single slice rather than splitting it into corner/edge tiles.

Animating Gradient Borders

For a flowing border effect, animate background-position on an oversized gradient:

.animated-border {
  border: 3px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(#0a0a0f, #0a0a0f) padding-box,
    linear-gradient(135deg, #7c6fff, #ff6fb0, #f7c948, #7c6fff) border-box;
  background-size: auto, 300% 300%;
  animation: borderShift 4s ease infinite;
}
@keyframes borderShift {
  0% { background-position: 0 0, 0% 50%; }
  50% { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}

For an animating border angle (rotating gradient direction) you'll need the @property API to register the angle as a custom property — supported in modern Chrome, Safari and Firefox.

Browser Support

Both methods work in every modern browser. background-clip is supported since Chrome 1, Firefox 4, Safari 4. border-image with gradients works since Chrome 16, Firefox 15, Safari 6.

MethodChromeFirefoxSafariEdge
background-clip1+4+4+ (-webkit-)12+
border-image16+15+6+12+
@property (animated angle)85+128+16.4+85+

Frequently Asked Questions

How do I make a gradient border in CSS?

CSS has no native gradient-border property. Use the background-clip technique: set a transparent border, then layer two backgrounds — a solid one clipped to padding-box and a gradient clipped to border-box. The generator above outputs the complete CSS automatically.

Why doesn't my gradient border have rounded corners?

You're using border-image, which ignores border-radius. Switch to the background-clip method (the default in this generator). Set border-radius normally, use a transparent border, and layer a padding-box solid background over a border-box gradient.

border-image vs background-clip — which method should I use?

Use background-clip when you need rounded corners (most modern UI). Use border-image when you need straight rectangular borders or want the gradient to repeat or stretch like a pattern. The generator defaults to background-clip; toggle to border-image mode if you specifically need it.

Can I animate a gradient border?

Yes. Animate background-position on an oversized gradient (size 300% 300%) for a flowing border effect, or use the @property API to register custom properties and animate gradient angle and color stops directly. The Animating Gradient Borders section above has working code.

How do I make a colorful rainbow gradient border?

Add multiple color stops: linear-gradient(135deg, red, orange, yellow, green, blue, violet) for a classic rainbow. The generator supports unlimited color stops — click "+ Add Color Stop" and drag the position slider to space them. For a smoother sweep, try the Conic type instead of Linear.

Does gradient border work in Safari?

Yes. The background-clip method works in all modern browsers including Safari. Add -webkit-background-clip: padding-box if you need to support Safari versions older than 14. The generator output includes the prefix automatically.

Want a deep dive into gradient border techniques and creative use cases? Read our complete CSS gradient borders guide →

Tool last updated: