CSS gradient border generator
Rounded gradient borders that border-image can’t do. Pick a technique, set width and radius, and copy code that works in every current browser.
.gradient-border {
border: 4px solid transparent;
border-radius: 14px;
background:
linear-gradient(#ffffff, #ffffff) padding-box,
linear-gradient(in oklch 135deg, #d6007a 0%, #ffb800 50%, #3ea8ff 100%) border-box;
}Three ways to draw a gradient border
| Technique | Rounded corners | Transparent inside | Notes |
|---|---|---|---|
| padding-box / border-box layers | Yes | No | Simplest; inside must be a solid colour. |
| Mask on a pseudo-element | Yes | Yes | Works over images and other gradients. |
| border-image | No | Yes | One line; corners are always square. |
Questions
How do I make a gradient border in CSS?
For square corners, border-image works: border: 4px solid; border-image: linear-gradient(…) 1. For rounded corners use two background layers: background: linear-gradient(#fff, #fff) padding-box, linear-gradient(…) border-box; border: 4px solid transparent; border-radius: 12px.
Why doesn’t border-radius work with border-image?
By specification, border-image replaces the border drawing entirely and ignores border-radius. That’s why the padding-box / border-box background technique is the standard way to get rounded gradient borders.
How do I get a gradient border with a transparent inside?
Use a mask: a pseudo-element with the gradient background, padding equal to the border width, and mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0). This generator outputs that version when you choose “Transparent inside”.
Can I animate a gradient border?
Yes. Register an angle with @property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }, use it in a conic-gradient border and animate --angle from 0deg to 360deg.