Gradient Borders

Create gradient borders using border-image or a pseudo-element background trick.

Example

/* Method 1: border-image */
.border1 { border: 3px solid; border-image: linear-gradient(135deg, #667eea, #764ba2) 1; }
/* Method 2: background-clip */
.border2 { background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #667eea, #764ba2) border-box; border: 3px solid transparent; border-radius: 12px; }

CSS

Full Editor

Pro Tip

Method 2 (background-clip) supports border-radius; border-image does not.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned