13.7. Shorthand Expressions

CSS supports many properties for formatting control over elements. For example, the following properties all apply to borders:

• border

• border-collapse

• border-spacing

• border-top

• border-right

• border-bottom

• border-left

• border-color

• border-top-color

• border-right-color

• border-bottom-color

• border-left-color

• border-style

• border-top-style

• border-right-style

• border-bottom-style

• border-left-style

• border-width

• border-top-width

• border-right-width

• border-bottom-width

• border-left-width

Several of these properties can be used to set multiple properties within the same definition. For example, to set an element's border, you could use code similar to the following:

p.bordered {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;

  border-right-width: 2px;
  border-right-style: dashed;
  border-right-color: red;

  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: black;

  border-left-width: 2px;
  border-left-style: dashed;
  border-left-color: red;
}

Alternately, you could use the shorthand property border-side to shorten this definition considerably:

p.bordered {
  border-top: 1px solid black;
  border-right: 2px dashed red;
  border-bottom: 1px solid black;
  border-left: 2px dashed red;
}

This definition could be further simplified by use of the border property, which sets all sides of an element to the same values:

p.bordered {
  border: 1px solid black;
  border-right: 2px dashed red;
  border-left: 2px dashed red;
}

This code first sets all sides to the same values and then sets the exceptions (right and left borders).

As with all things code, avoid being overly ingenious when defining your styles. Doing so will dramatically decrease the legibility of your code.