Generate CSS gradient borders with no images — background-clip trick for border-radius support, or border-image for simplicity. Customize colors, angle and width, copy the CSS instantly.
border-radius. Uses a pseudo-element with a gradient background clipped behind a solid inner fill.
There is no direct border-gradient CSS property. Two workarounds exist. The border-image method is simple — border-image: linear-gradient(...) 1 — but it fundamentally cannot be combined with border-radius. The background-clip (pseudo-element) method is more code but fully supports rounded corners: a ::before pseudo-element with the gradient background sits behind the element with inset: -Npx and a slightly larger border-radius, while the element itself has a solid background that covers the inner area. Set z-index: -1 on the pseudo-element so it appears behind. This technique is broadly supported in all modern browsers.