Splitting attributes from CSS rules

I want to combine

.alpha {
    border-top: solid 1px #990000 ;
}
.beta {
    border-bottom: solid 5px #990000;
}

into something like

.alpha, .beta {
    border: #990000 ;
}
.alpha {
    border-top: solid 1px;
}
.beta {
    border-bottom: solid 5px;
}

it would make it much easier to easier to change colours programmatically. Is this possible? I should not that I've tried the above开发者_运维知识库 and it doesn't seem to work in Firefox. Only the last rules (i.e. .alpha and .beta) are applied, while the combined is ignored.

Thanks

The CSS in your example won't work.

You could use...

.alpha, .beta {
    border-color: #900;
    border-style: solid;
    border-width: 0;
}

.alpha {
    border-top-width: 1px;
}

.beta {
    border-bottom-width: 5px;
}

jsFiddle.