CSS Shorthand Properties Cheat Sheet

I forget the order of these all the time.

.shorthand-properties {
/* background: <color> <image> <repeat> <position>; */
   background: #fff url("bg.png") repeat-x center top;
/* list-style: <type> <position> <image>; */
   list-style: none circle outside url("list-bullet.png");
/* font: <style> <variant> <weight> <size>/<line-height> <family>; */
   font: italic small-caps 300 14px/21px 'AwesomeFont', Arial, sans-serif;
/* transition: <property-name> <duration> <timing-function> <delay>; */
   transition: opacity 2s ease-in-out .125s;
.padding-shorthand {
/* padding: <top> <right> <bottom> <left>; */
   padding: 10px 5px 10px 7px;
/* padding: <top> <right-and-left> <bottom>; */
   padding: 1em 5px 1.5em;
/* padding: <top-and-bottom> <right-and-left>; */
   padding: 1em 2em;
/* padding: <all-sides>; */
   padding: 10%;

Other box-edge properties, such asĀ margin, border-width, border-style, and border-color all work the same way.

.border-shorthand {
/* border: <width> <style> <color>; */
   border: 1px solid #000;

Side-specific border properties, such border-top, border-bottom, border-left, and border-right, all work the same way.

#border-radius-shorthand {
/* border-radius: <top-left> <top-right> <bottom-right> <bottom-left>; */
   border-radius: 2px 3px 4px 5px;
/* border-radius: <top-left> <top-right-and-bottom-left> <bottom-right>; */
   border-radius: 1px 5px 2px;
/* border-radius: <top-left-and-bottom-right> <top-right-and-bottom-left>; */
   border-radius: 10px 20px;
/* border-radius: <all-sides>; */
   border-radius: 5%;

To use two values for border-radius radii, specify a set of values for the horizontal radius followed by another for the vertical, separated by a forward slash.

#border-radius-separate-horiz-vert-values {
/* border-radius: <all-sides> / <top-left> <top-right> <bottom-right> <bottom-left>; */
   border-radius: 10px / 2px 5px 10px 5px;
/* border-radius: <top-left> <top-right> <bottom-right> <bottom-left> / <top-left-and-bottom-right> <top-right-and-bottom-left>; */
   border-radius: 2px 4px 6px 8px / 25% 50%;

And so on.