Created attachment 165910 [details]
flat fill for panel works as expected

When using border-bottom: 1px solid rgba(255,255,255,.5); rule on the panel (#panel {}) when the panel has a gradient fill with rgba() colors, the top left and right borders magically appear. Overriding them with their border-top, border-left and border-right properties doesn't seem to have any effect. Using a flat rgba() fill for the panel works fine.

This works fine:

#panel {
    color: #ffffff;
    font-size: 12px;
    background-color: black;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    background-color: rgba(0,0,0,0.5)
    /*
    background-gradient-direction: vertical;
    background-gradient-start: rgba(0,0,0,0.9);
    background-gradient-end: rgba(0,0,0,0.5);
    */
}

Results in attachment #1 [details]

However, setting the background as a gradient makes top left and right borders appear:

#panel {
    color: #ffffff;
    font-size: 12px;
    background-color: black;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    background-gradient-direction: vertical;
    background-gradient-start: rgba(0,0,0,0.9);
    background-gradient-end: rgba(0,0,0,0.5);
}

Results in attachment #2 [details]