Question

Sometimes I find myself in a situation where I want to define a border rule for the left and right side of an element. But honestly, border-left: solid 1px #999; border-right: solid 1px #999 is little clumsy. It wastes space, I have to apply changes twice and it may or may not be rendered less efficiently.

Is there a way to define horizontal borders or vertical borders in one go?

Answer 1

You can do it in one go like this:

#myDiv
{
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    border-width: 0 1px; /*horizontal, vertical*/
}​​​​​​

http://jsfiddle.net/52AEP/