border-image on thead not showing in Chrome

Question

I would like to set a gradient as border-image on my thead to have a beautiful, smooth border, but it’s not showing. Setting a classical border works, as well as my gradient is showing if I set it to a classical div.

Here is my HTML:

<table id="foo">
    <thead>
        <tr>
            <td>Header</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>link</td>
        </tr>
    </tbody>
</table>

And the associated CSS:

#foo {
    border-collapse: collapse;
}

#foo thead {
    border-image: -webkit-linear-gradient(left, transparent,black, transparent) 0 0 1 0 stretch;
    border-bottom-width: 1px;
}

I also tried to set the border to #foo thead tr but it does not work either.