/* short-hand properties */
div {
    // position / background-size
    background: 0px 0px / 12px;
    background: 25% 75% / cover;
    background: center / 50%;
    background: left / 3em;
    background: right / auto;
    background: top / contain;
    background: 0px 0px, center / 50% auto;
    background: 0px 0px, center / 3em 25%;

    // size / line-height
    font: 0.8em / normal;
    font: 12px / normal;
    font: 80% / normal;
    font: large / 34%;
    font: large / 3.5;
    font: large / 3em;
    font: larger / normal;
    font: 0.8em / 3.5;
    font: 12px / 3em;
    font: 80% / 34%;

    /* size | family */
    font: 2em "Open Sans", sans-serif;

    /* style | size | family */
    font: italic 2em "Open Sans", sans-serif;

    /* style | variant | weight | size/line-height | family */
    font: italic small-caps bolder 16px/3 cursive;

    /* The font used in system dialogs */
    font: message-box;

    grid-column: 1 / 3;
    grid-column: 2 / -1;
    grid-column: auto / auto;
    grid-column: span 3 / 6;
    grid-column: 5 somegridarea span / 2 span;
    grid-row: 1 / 3;
    grid-row: 2 / -1;
    grid-row: auto / auto;
    grid-row: span 3 / 6;
    grid-row: 5 somegridarea span / 2 span;

    /* shorthands */
    border-radius: 0 0 0 100% / 0 0 0 30px;
    border-radius: 0 / 2px;
    border-radius: 0 / #{2px};
    border-radius: 1em / 0;
    border-radius: 0 0 0 100% / 0 0 0 30px;
    border-radius: 10px 5% / 20px;
    border-radius: 10px 5% / 20px 30px;
    border-radius: 10px 5px 2em / 20px 25px 30%;
    border-radius: 10px 5% / 20px 25em 30px 35em;
    /* these are not shorthands! (no unit on the divider) */
    border-radius: 1em / 2;
    border-radius: 10px 5% / 2;
    border-radius: 10px 5% / 2 30px;
    /* these are shorthands with wrong values (lack of unit but more than 4 values if this is a division)*/
    border-radius: 10px 5px 2em / 20 25px 30%;
    border-radius: 10px 5% / 20 25em 30px 35em;
}