Even if shorthand properties are convenient to use, there are a few edge cases to keep in mind when using them:

A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it overrides previously set values. Therefore:
```
  background-color: red;
  background: url(images/bg.gif) no-repeat top right;
```
will not set the color of the background to red but to background-color's default, transparent, as the second rule has precedence.
Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance. But this does not work as easily when several properties can have identical values and it may be confusing or hard to understand such as in:
```
  margin: 10px 5px 8px 5px;
```

Therefore, shorthand properties should be sparsely used.

This rule raises an issue each time a shorthand property is declared and its value contains more than one element.

Noncompliant Code Example

.mybox {
  margin: 10px 5px 15px; /* Noncompliant */
  border-color: green; /* Compliant: value is a single element */
}

Compliant Solution

.mybox {
  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 15px;
  margin-left: 5px;
  border-color: green;
}

[[shorthandProperties]]

Property	Shorthand For