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.