Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Zev Cohen
Zev Cohen
2,770 Points
Posted by Zev Cohen
Zev Cohen
2,770 Points

Border-bottom gradient

the bottom of my border is a solid color yet i would like to make it a gradient, but I cannot find out how, no matter what I search on google. here is the current code, its the bottom of the page.

.main-footer { padding-top: 60px; padding-bottom: 60px; border-bottom: 50px solid #000; }

Thanks!

2 Answers

Dave StSomeWhere
Dave StSomeWhere
19,870 Points
Dave StSomeWhere
Dave StSomeWhere
19,870 Points

One way is to use a border image with a transparent border.

Try this:

.main-footer { 
  padding-top: 60px; 
  padding-bottom: 60px; 
  border-bottom: 50px solid transparent;
  border-image: linear-gradient(#e66465, #9198e5) 100;
}

Check out MDN Border Image for details

Zev Cohen
Zev Cohen
2,770 Points
Zev Cohen
Zev Cohen
2,770 Points

oh that makes hecka sense, thanks