fading gradiated borders

so it took me a while to come up with but once I did the code is pretty trivial. The Design called for a box whose side borders shifted colors along the y axis but also faded to transparent about 80% down. So imagine a hairline border that changed color, typically from a darker saturated color to a lighter color as it goes down but also changing transparency to 0.

The solution was to use CSS3 multiple background abilities. My project was using SASS so below is the scss code for it. the only requirement that I've seen is that the element using the class needs to either have a fixed height or be contained in another element that has a fixed height.

.gradiated-fading-borders {
    margin-top:10px
    padding:10px;

    @include border-top-left-radius(9px);
    @include border-top-right-radius(9px);
    border:1px solid #B5C5D7;

    border-width:1px 0 0;

    background-color:#f6f6f6;
    @include filter-gradient(#f6f6f6, #FFF, vertical);

    @include background(
      linear-gradient(left top, rgba(181, 197, 215, 0.75),#FFF 78%),
      linear-gradient(center top, #e3e3e3 0%, rgba(239, 238, 238, 0.81) 3%, #f6f6f6 58%, #FFF 84%),
      linear-gradient(right top,rgba(181, 197, 215, 0.75),#FFF 78%)
    );
    background-position:left top, center top, right top;
    background-size:1px 80%,99.85% 100%, 1px 80%;
    background-repeat:no-repeat, no-repeat, no-repeat;



  };

Here is a picture of the outcome, I've masked the internals as its private information. What you can see sorta is the rounded top corner with strong hairline and as it drops down the hairline shifts colors and becomes transparent, likewise the background gray gradient is also shifting as it moves down eventually becoming 100% transparent a bit further down from where the hairline disappeared.