How do I create a CSS border with gradient?

Use this free CSS border generator: select gradient border mode, choose your colors and direction, adjust border width and radius, then copy the generated CSS code. Supports linear and radial gradients with border-image technique.

What border styles are supported?

All CSS border styles: solid, dashed, dotted, double, groove, ridge, inset, outset. Plus gradient borders using border-image, and animated borders using CSS keyframes.

How do I generate border-radius?

Adjust the four corner radius sliders individually or use the link toggle to change all corners at once. Supports elliptical corners with separate horizontal/vertical radii. Copy the border-radius CSS code instantly.

Is this CSS border generator free?

Yes, completely free with no signup. All processing happens in your browser. Generate unlimited CSS border codes with live preview. Works offline after page load.

Free CSS Border Generator Online

← Home / Tools

Live Preview

Border Preview

Border Style

Style

Width 3px

Color

Background

Border Radius

Top Left 12px

Top Right 12px

Bottom Left 12px

Bottom Right 12px

Link all corners

Generated CSS Code

Related Text & Border Tools

Copied!