Can I use border-radius with gradient borders?

Not with border-image. Use the background-clip method (two backgrounds with padding-box/border-box) or the pseudo-element method for gradient borders with rounded corners.

How do I animate a gradient border?

Use CSS @property to register a custom angle property, apply it to the gradient direction, and animate it with @keyframes. This creates a smooth rotating gradient effect.

What is the best method for gradient borders?

The background-clip method is the most reliable for most use cases — it supports border-radius, works in all modern browsers, and requires no extra HTML elements.

How to Create a CSS Gradient Border

🔲

Try Gradient Border Generator

Free, no signup →