compass/css fade border at edges?

I've seen this technique used quite a lot. Like say a separator border (like bottom border for stackoverflow header) which fades at both ends. How do I achieve this with compass? I've searched their documentation and google and can't find any examples of how to do this.

Solution

I've never used Compass CSS, but how about mixing CSS and SVG?

Your SVG file:

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="div" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(255, 255, 225);stop-opacity:0"/>
            <stop offset="50%" style="stop-color:rgb(153,153,153);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255, 255, 225);stop-opacity:0"/>
        </linearGradient>
    </defs>

<rect x="0" y="0" width="100%" height="100%" fill="url(#div)" />
</svg>

The CSS:

div.separator
{
    width: 80%;
    height: 16px;
    background-image: url(gradient_file.svg);
}