CSS Gradient Border Generator

Generate gradient borders using border-image or the pseudo-element technique.

Method

⚠️ border-image ignores border-radius. Switch to pseudo-element for rounded corners.

Gradient Type

Angle: 135°

Border Width: 3px

Border Radius: 12px

Color Stops

50%

100%

Preview

Content

CSS Code

border: 3px solid transparent;
border-image: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%) 1;
/* ⚠️ border-image doesn't support border-radius */
/* Use the pseudo-element method for rounded corners */

Loading tool...