how to style table's bottom border using gradient

Question

I got a css class to separate the contents:

HTML:

<div class='seperator-gradient'></div>

css:

.seperator-gradient{
width: 100%;
height: 1px;
border-bottom: 
background: #c4c4c4; /* Old browsers */
background: -moz-linear-gradient(left,  #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to right,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 ); /* IE6-9 */
}

this works fine, but now, I have a table, I'd like the bottom of each cells of this table has the same feature like the above. Is it possible to achieve this?

at the moment, I make the table's css to:

    border-bottom: 1px solid;

but it doesn't have the same effect as the seperator-gradient class can achieve.

Check here on answer 9. http://stackoverflow.com/questions/2717127/css3-gradient-borders — Jeyarathnem Jeyachanthuru, Sep 20 '13 at 06:26

jphase · Answer 1 · 2013-09-20T06:05:59.743

1

This is only supported in a few browsers at the moment:

-webkit-border-image: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)) 0 0 1 1 repeat repeat;

Here's the browsers it's supported in: http://caniuse.com/#search=border-image

edited Sep 20 '13 at 06:05

answered Sep 20 '13 at 05:56

jphase

396
1
11

It is worth noting that gradients work with border-image (where supported) because gradients are considered images in css, not colors, which is why border-color will not work. So anywhere an image can be supplied should play nice with gradients. – Anthony Sep 20 '13 at 06:00

Rakesh · Answer 2 · 2017-08-22T12:48:45.633

apply the class .seperator-gradient property to all td tags of that particular table

In your css put

table td {
width: 100%;
height: 1px;
border-bottom: 
background: #c4c4c4; /* Old browsers */
background: -moz-linear-gradient(left,  #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to right,  #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 ); /* IE6-9 */
}

Jeyarathnem Jeyachanthuru · Answer 3 · 2017-11-20T09:10:48.707

0

Here is some usefull gradient effects.

http://css-tricks.com/examples/GradientBorder/

edited Nov 20 '17 at 09:10

answered Sep 20 '13 at 06:28

Jeyarathnem Jeyachanthuru

1,151
10
21

how to style table's bottom border using gradient

3 Answers3