Question

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

Answer 1

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.