CSS Shorthand Properties: The Complete Reference
Shorthand properties let you set multiple related CSS values in a single declaration. Understanding their exact syntax — especially the order of values — prevents subtle, hard-to-debug bugs.
1. Why Shorthand Matters
/* Longhand: 4 declarations */
margin-top: 1rem;
margin-right: 2rem;
margin-bottom: 1rem;
margin-left: 2rem;
/* Shorthand: 1 declaration */
margin: 1rem 2rem;
/* Shorthand is faster to write, but the ORDER is critical */
/* Getting the order wrong produces invisible bugs */
2. margin and padding Shorthand
Both follow the same exact pattern — the "clock" order: Top → Right → Bottom → Left
/* 1 value: all four sides */
margin: 1rem;
/* equivalent: top=1rem, right=1rem, bottom=1rem, left=1rem */
/* 2 values: vertical | horizontal */
margin: 1rem 2rem;
/* equivalent: top=1rem, bottom=1rem, right=2rem, left=2rem */
/* 3 values: top | horizontal | bottom */
margin: 1rem 2rem 1.5rem;
/* equivalent: top=1rem, right=2rem, bottom=1.5rem, left=2rem */
/* 4 values: top | right | bottom | left (clockwise) */
margin: 1rem 2rem 1.5rem 0;
/* equivalent: top=1rem, right=2rem, bottom=1.5rem, left=0 */
/* Memory trick: "TRouBLe" — Top, Right, Bottom, Left */
/* Same rules apply to padding */
padding: 0; /* All sides: 0 */
padding: 0.5rem 1rem; /* Vertical: 0.5rem, Horizontal: 1rem */
padding: 1rem 1.5rem 2rem; /* Top: 1rem, Sides: 1.5rem, Bottom: 2rem */
padding: 1rem 2rem 1.5rem 0.5rem; /* Top Right Bottom Left */
/* Common patterns */
padding: 0 1rem; /* No top/bottom, 1rem sides (nav links) */
padding: 1.5rem; /* Equal all sides (card body) */
padding: 0.5rem 1rem; /* Button padding (compact vertical, wider horizontal) */
3. border Shorthand
/* Full border shorthand: width | style | color */
border: 1px solid #ccc;
border: 2px dashed var(--color-primary);
border: none; /* Remove all borders */
border: 0; /* Same effect as none */
/* Individual side shorthands */
border-top: 1px solid var(--color-border);
border-right: none;
border-bottom: 2px solid var(--color-primary);
border-left: 4px solid var(--color-primary); /* Accent left border pattern */
/* Per-property breakdown */
border-width: 1px; /* or: 1px 2px (top/bottom | sides) */
border-style: solid; /* solid, dashed, dotted, double, groove, none */
border-color: var(--color-border);
/* border-radius shorthand */
border-radius: 8px; /* All 4 corners */
border-radius: 8px 0; /* Top-left/Bottom-right | Top-right/Bottom-left */
border-radius: 8px 0 8px 0; /* TL | TR | BR | BL */
border-radius: 50%; /* Circle (on equal width/height) */
border-radius: 9999px; /* Pill shape */
border-radius: 1rem 1rem 0 0; /* Top rounded, bottom square (card image) */
/* Elliptical corners: horizontal-radius / vertical-radius */
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; /* Blob shape */
4. background Shorthand
The most complex shorthand — order matters significantly:
/* Full syntax: color image position/size repeat attachment origin clip */
background: #0f0f0f url('hero.jpg') center center / cover no-repeat fixed;
/* Components broken down */
background-color: #0f0f0f;
background-image: url('hero.jpg');
background-position: center center;
background-size: cover; /* MUST come after position, separated by / */
background-repeat: no-repeat;
background-attachment: fixed; /* fixed | scroll | local */
/* Common practical patterns */
background: var(--color-bg); /* Solid color only */
background: linear-gradient(135deg, #6c63ff, #a855f7); /* Gradient */
background: url('pattern.svg') repeat center / 200px; /* Pattern tile */
background: url('hero.jpg') center / cover no-repeat; /* Image hero */
/* Multiple backgrounds (layer order: first is on top) */
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.3)), /* Overlay on top */
url('hero.jpg') center / cover no-repeat; /* Image below */
5. font Shorthand
/* Full syntax: style variant weight size/line-height family */
font: italic small-caps 700 1.5rem/1.6 'Inter', sans-serif;
/* RULES:
- size and family are REQUIRED
- line-height follows size, separated by /
- weight must come before size
- style and variant come before weight
*/
/* Common patterns */
font: 700 1rem/1.5 'Inter', sans-serif; /* Bold body text */
font: 900 clamp(2rem,5vw,4rem)/1.2 'Playfair Display', serif; /* Fluid heading */
font: inherit; /* Inherit all font properties */
/* Longhand equivalents */
font-style: italic; /* normal | italic | oblique */
font-variant: small-caps; /* normal | small-caps */
font-weight: 700; /* 100–900, bold, normal */
font-size: 1.5rem;
line-height: 1.6; /* Unitless = relative to font-size */
font-family: 'Inter', sans-serif;
/* Warning: using font shorthand RESETS any omitted font properties to their defaults */
/* If you set font-size elsewhere and use font: shorthand — it may override */
6. transition Shorthand
/* Single property syntax: property | duration | easing | delay */
transition: background-color 0.2s ease 0s;
/* Multiple transitions — comma-separated */
transition:
background-color 0.2s ease,
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease,
opacity 0.2s ease;
/* Common patterns */
transition: all 0.2s ease; /* All properties — simple but less performant */
transition: color 0.2s; /* Duration required; easing optional (defaults to ease) */
transition: transform 0.3s ease; /* Single GPU-accelerated property */
/* Longhand */
transition-property: background-color, transform;
transition-duration: 0.2s, 0.3s;
transition-timing-function: ease, cubic-bezier(0.34,1.56,0.64,1);
transition-delay: 0s, 0.1s;
/* Best practice: only transition specific properties (not "all") */
/* GPU-accelerated (cheap to animate): transform, opacity */
/* CPU-dependent (expensive to animate): width, height, top, left, background */
7. animation Shorthand
/* Syntax: name | duration | easing | delay | iteration | direction | fill-mode | state */
animation: fadeUp 0.6s ease 0.2s 1 normal both running;
/* Common patterns */
animation: fadeUp 0.6s ease both; /* Name + duration + fill-mode */
animation: spin 1s linear infinite; /* Infinite loop */
animation: pulse 2s ease-in-out infinite alternate; /* Ping-pong */
/* Multiple animations */
animation:
fadeIn 0.5s ease both,
slideUp 0.5s ease 0.1s both;
/* Longhand */
animation-name: fadeUp;
animation-duration: 0.6s;
animation-timing-function: ease;
animation-delay: 0.2s;
animation-iteration-count: 1; /* 1 | infinite | 3 */
animation-direction: normal; /* normal | reverse | alternate | alternate-reverse */
animation-fill-mode: both; /* none | forwards | backwards | both */
animation-play-state: running; /* running | paused */
8. flex Shorthand
The most commonly misunderstood shorthand:
/* Syntax: flex-grow | flex-shrink | flex-basis */
flex: 1 1 0%; /* Grow: yes, Shrink: yes, Basis: 0 */
flex: 0 0 200px; /* Fixed 200px, no grow or shrink */
flex: 1; /* Equivalent to flex: 1 1 0% — common "fill remaining space" */
flex: auto; /* Equivalent to flex: 1 1 auto */
flex: none; /* Equivalent to flex: 0 0 auto — don't flex at all */
flex: initial; /* Equivalent to flex: 0 1 auto — default browser behavior */
/* Practical examples */
.c-nav__logo { flex: 0 0 auto; } /* Logo: don't grow or shrink */
.c-nav__menu { flex: 1; } /* Menu: fill remaining space */
.c-sidebar { flex: 0 0 280px; } /* Sidebar: fixed 280px, no flex */
.c-content { flex: 1; min-width: 0; } /* Content: grow, allow shrinking */
/* min-width:0 — critical! Flex items default to min-width:auto which can overflow */
9. grid Shorthand
/* grid-template shorthand: rows / columns */
grid-template: auto 1fr auto / 1fr 3fr 1fr;
/* Equivalent to: */
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 3fr 1fr;
/* grid shorthand (complex — includes template + gap + auto-track sizes) */
grid: 100px 1fr / 200px 1fr;
/* Sets template only — same as grid-template for simple cases */
/* grid-area shorthand on CHILD elements: row-start / col-start / row-end / col-end */
.c-header { grid-area: 1 / 1 / 2 / -1; } /* First row, all columns */
.c-sidebar { grid-area: 2 / 1 / 3 / 2; } /* Second row, first column */
.c-main { grid-area: 2 / 2 / 3 / -1; } /* Second row, remaining columns */
/* Named grid-area shorthand — used with grid-template-areas */
.c-hero { grid-area: hero; }
.c-sidebar { grid-area: sidebar; }
10. outline vs border
/* outline: width | style | color (no size shorthand like border-radius) */
outline: 2px solid var(--color-primary);
outline: none;
outline: 0;
/* outline-offset: space between element edge and outline */
outline-offset: 3px; /* Positive: outside, Negative: inside */
/* Key difference: outline vs border */
/* border: affects layout (adds to box model) */
/* outline: does NOT affect layout (doesn't push other elements) */
/* outline: used for focus rings */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
}
11. Common Shorthand Pitfalls
/* ❌ Pitfall 1: background shorthand resets clip and origin */
/* If you set background-clip: text separately, then use background shorthand — it resets */
.c-gradient-text {
-webkit-background-clip: text;
background: linear-gradient(135deg, #6c63ff, #a855f7); /* ← RESETS background-clip */
}
/* ✅ Fix: set background-image after background-clip, or use longhand */
/* ❌ Pitfall 2: flex:1 without min-width:0 */
.c-content { flex: 1; }
/* Content with long text or code blocks will overflow the flex container */
/* ✅ Fix: */
.c-content { flex: 1; min-width: 0; }
/* ❌ Pitfall 3: margin shorthand order confusion */
margin: 0 1rem 0 0; /* Only right margin — is this readable? */
/* ✅ Better: use longhand for non-uniform margins */
margin-right: 1rem;
/* ❌ Pitfall 4: border shorthand removes border-radius */
/* It doesn't — border-radius is separate from border shorthand */
/* ✅ You can safely use both */
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
/* ❌ Pitfall 5: font shorthand resets line-height */
font: 700 1rem 'Inter', sans-serif; /* Forgot /line-height — resets to 'normal' */
/* ✅ Always include line-height in font shorthand */
font: 700 1rem/1.5 'Inter', sans-serif;