Border Gradient

Question

I'm trying to make the border of a div have a gradient as seen here, under the 'Gradient' heading.

enter image description here

I've put the code shown on this site into a jsfiddle, here, but as you can see, it doesn't work.

.border_gradient {
    border: 8px solid #000;
    -moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    padding: 5px 5px 5px 15px;
    width: 300px;
}

Can anyone point me in the right direction for how to accomplish such a gradient? Thanks in advance.

It works on the latest FireFox but not on the latest Chrome or IE 10. — Steve Wellens, Dec 22 '13 at 03:14
Your using `-moz-` prefixed properties. These only work in Firefox. — nietonfir, Dec 22 '13 at 04:20

score 0 · Answer 1 · answered Dec 22 '13 at 03:58

0

As suggested by codehorse, using box shadow inset accomplishes what I'm looking for, and with much less code at that. Thanks guys!

answered Dec 22 '13 at 03:58

mpataki14

208
2
8

score 0 · Answer 2 · answered Dec 22 '13 at 04:18

This css declaration will only work under mozilla browser

.border_gradient {
    border: 8px solid #000;
    -moz-border-bottom-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-top-colors:    #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-left-colors:   #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-right-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
}

Border Gradient

2 Answers2