CODEWITHSUNDEEP
css
pranay vadel
pranay vadel

Reputation: 1

How to implement Gradient border in CSS3 where gradient is done horizontally

I am trying to implement gradient border, I can do that where gradient is done vertically from top to bottom but I need to implement it from left to right, given below is my code. Thanks in advance 

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

Upvotes: 0

Views: 4317

Answers (2)

Lea Verou
Lea Verou

Reputation: 23887

You can fake it with multiple shadows: http://jsfiddle.net/zt2ve/

Upvotes: 1

Nicholas Carey
Nicholas Carey

Reputation: 74197

This page will show you everything you need to know (except for broken browsers like IE)

http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

And this page

http://www.westciv.com/tools/gradients/index.html

provides a graphical UI to design a gradient and generate the CSS (webkit/mozilla only, though. No support for Opera or IE).

Upvotes: 1

Related Questions