Table with gradient borders and cell gradient borders

Question

I would like to get a table with a gradient on the border and div borders, acting as if they were an integer element, and I mean that the color of the cell border should be different.

What I have so far:

table tr:first-child td { border-top: 0; } table tr:last-child td { border-bottom: 0; } table tr td:last-child { border-right: 0; border-left: 0; } table tr td:first-child { border-left: 0; } td { border-right: 2px solid #bebebe; border-bottom: 2px solid #bebebe; } td { border-collapse: collapse; } table { /*border-collapse: collapse;*/ border-style: solid; border-width: 20px 20px; border-image-source: linear-gradient(to bottom, #eee 0%, #bebebe 100%); border-image-slice: 20; border-image-repeat: stretch; box-shadow: 0px 10px 10px black; } body { background-color: #eee; } 

 <table class="tablagradiente" align="center" width="41%"> <tr> <td> <p>Sesiones Ordinarias</p> </td> <td> <p>Sesiones Extraordinarias</p> </td> </tr> <tr> <td> <p>&nbsp;</p> </td> <td> <p>Primera Sesión Extraordinaria 2015</p> </td> </tr> </table> 

Answer 1

Decision

In fact, you can achieve what you want without the border-image property by setting the following:

 table { background-image: linear-gradient(to bottom, red 0%, blue 100%); /* the gradient */ background-origin: border-box; /* set background to start from border-box */ border-spacing: 5px; /* space between each cell */ border: 5px solid transparent; /* optional */ } 

Browser Support:

• The background image property also has much better browser support than the Border image .

---

Description

In essence, we are doing the following:

• Add linear-gradient as the background table.
• Set the background source so that it starts with the border-box table. (For more on background-origin see my answer here ).
• Separate the border between the table cells and the rows ( by default ) so that the background from the table is visible through the gap between them.
• Add an extra transparent border to your table. This is optional and only required because the border of the table in your image seems thicker than the border between cells.

 table { background-image: linear-gradient(to bottom, red 0%, blue 100%); /* the gradient */ background-origin: border-box; /* set background to start from border-box */ border-spacing: 5px; /* space between each cell */ border: 5px solid transparent; /* optional */ } body { background-color: #eee; } /* Just for demo */ table { width: 500px; } td { background: white; /* if not set cell would also be transparent and show the gradient */ } 

 <!-- prefix free lib for older browsers --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <table class="tablagradiente" align="center" width="41%"> <tr> <td><p>Sesiones Ordinarias</p></td> <td><p>Sesiones Extraordinarias</p></td> </tr> <tr> <td><p>&nbsp;</p></td> <td><p>Primera Sesión Extraordinaria 2015</p></td> </tr> <tr> <td><p>&nbsp;</p></td> <td><p>Primera Sesión Extraordinaria 2015</p></td> </tr> <tr> <td><p>&nbsp;</p></td> <td><p>Primera Sesión Extraordinaria 2015</p></td> </tr> </table> 

^{Note: I used a red-blue gradient in the response to make the effect more visible to the eyes.}