How do I create a gradient border in CSS?

Use border-image: border: 4px solid; border-image: linear-gradient(135deg, #667eea, #764ba2) 1; — or use the padding-box / border-box background-clip technique for elements that need border-radius.

Why does border-image not work with border-radius?

border-image and border-radius are not compatible. When both are applied, the border-radius is ignored. Use the background-clip: padding-box / border-box technique instead for rounded gradient borders.

What is the background-clip technique for gradient borders?

Apply two background layers: background: linear-gradient(white, white) padding-box, linear-gradient(...) border-box; border: Xpx solid transparent. The inner layer fills the padding area with the element colour, revealing only the gradient in the border area.

Does the border-image technique work in all browsers?

border-image is supported in all modern browsers. The background-clip technique is also widely supported. Neither requires vendor prefixes in current browser versions.

Can I animate a gradient border?

Yes. Animate border-image-slice or use CSS custom properties to change the gradient colours. For smooth animation, the background-clip technique with animated background-position works well.

Browse tools

Free · Fast · Privacy-first

CSS Gradient Border Generator

CSS does not support gradient values directly in the border-color property, but there are two reliable techniques to achieve gradient borders: border-image and background-clip with padding. FixTools generates the CSS for both approaches so you can use whichever suits your design.

⚡ Use Tool Now How it works

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

⚡

Generates both border-image and background-clip techniques

🔒

Configurable border width and radius

✨

Live preview of the gradient border effect

CSS Tool

Gradient

All processing happens in your browser — your files are never uploaded to any server.

🚀Open Gradient

100% Free · No account · Works on any device

How to use this tool

💡

Generate gradient border CSS using border-image: border: 4px solid; border-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) 1; — or use the background-clip technique for rounded corners.

How It Works

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

1
Choose the border-image technique
For elements without border-radius, use: border: 4px solid transparent; border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
2
Or use the background-clip technique for rounded corners
For rounded gradient borders: background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #667eea, #764ba2) border-box; border: 4px solid transparent; border-radius: 12px;
3
Set border width
Adjust the border: 4px solid transparent value to change the border thickness.
4
Copy and apply the CSS
Copy the generated CSS and apply it to your target element class.