Question

I use border image to create a gradient on the left border of a TH but right border must be solid. But border image applies to all borders and there is no border-image-right to prevent it. How can I fix this?

<style>
TH {
    border-left:1px solid;
    -webkit-border-image:-webkit-linear-gradient(bottom, #BBB, rgba(255, 255, 255, 0)) 0 100%
    border-right:1px solid #CCC;
}
</style>

This is how it looks now:

But this is how it must be:

as you see now the right border has a gradient but i want it to be solid like the second image.

Answer 1

What do you think about such a hack :

<th style="width:104px; height:100px; background:url(up-down-gradient.png)">
  <div style="width:100px; height:100px; border-right:2px solid #888; margin-left:2px"></div>
</th>