About

CSS shorthand properties compress multiple declarations into one line. A single margin: 10px 20px expands to four distinct properties. Getting the expansion order wrong causes layout bugs that are difficult to trace in production. This tool parses your CSS rules and expands every recognized shorthand - margin, padding, border, background, font, flex, animation, transition, inset, border-radius, and more - into their canonical longhand equivalents following the CSS specification's value resolution order.

The converter handles 1-to-4 value box-model expansion (top, right, bottom, left), compound shorthands like border where value types are detected by grammar rather than position, and logical properties such as margin-inline and padding-block. It preserves !important flags, comments, and unrecognized properties verbatim. Note: ambiguous shorthand values (e.g., a single keyword valid as both a font-family and font-weight) are resolved using the CSS specification's greedy parsing heuristic, which may differ from edge-case browser behavior.

Formulas

Box-model shorthands (margin, padding, border-width, border-style, border-color, inset) follow a clockwise expansion pattern starting from top:

Given values V = [v₁, v₂, ..., v_n]

{

n = 1: top = right = bottom = left = v₁n = 2: top = bottom = v₁, right = left = v₂n = 3: top = v₁, right = left = v₂, bottom = v₃n = 4: top = v₁, right = v₂, bottom = v₃, left = v₄

For compound shorthands like border, value assignment uses type detection rather than positional order. The parser checks each token against known keyword sets: border-style keywords (solid, dashed, dotted, etc.), border-width keywords (thin, medium, thick) or length units, and treats the remaining token as border-color. Two-axis shorthands (overflow, gap, place-items) follow a simpler pattern: 1 value maps to both axes, 2 values map to block/inline (or x/y) respectively. The border-radius shorthand accepts an optional / separator for elliptical radii, expanding each axis independently using the 1 - 4 box-model rule above.

Where v_n = individual value token from the shorthand declaration, n = count of whitespace-separated values provided.

Reference Data

Shorthand Property	Longhand Expansions	Value Count	Spec Reference
margin	margin-top, margin-right, margin-bottom, margin-left	1 - 4	CSS Box Model L3
padding	padding-top, padding-right, padding-bottom, padding-left	1 - 4	CSS Box Model L3
border	border-width, border-style, border-color (then each → 4 sides)	1 - 3	CSS Backgrounds L3
border-top	border-top-width, border-top-style, border-top-color	1 - 3	CSS Backgrounds L3
border-width	border-top-width, border-right-width, border-bottom-width, border-left-width	1 - 4	CSS Backgrounds L3
border-style	border-top-style, border-right-style, border-bottom-style, border-left-style	1 - 4	CSS Backgrounds L3
border-color	border-top-color, border-right-color, border-bottom-color, border-left-color	1 - 4	CSS Backgrounds L3
border-radius	border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius	1 - 4 (/ 1 - 4)	CSS Backgrounds L3
outline	outline-width, outline-style, outline-color	1 - 3	CSS UI L3
background	background-color, background-image, background-repeat, background-position, background-attachment	1 - 5	CSS Backgrounds L3
font	font-style, font-variant, font-weight, font-size, line-height, font-family	2+ (complex)	CSS Fonts L3
list-style	list-style-type, list-style-position, list-style-image	1 - 3	CSS Lists L3
overflow	overflow-x, overflow-y	1 - 2	CSS Overflow L3
flex	flex-grow, flex-shrink, flex-basis	1 - 3	CSS Flexbox L1
flex-flow	flex-direction, flex-wrap	1 - 2	CSS Flexbox L1
gap	row-gap, column-gap	1 - 2	CSS Box Align L3
place-items	align-items, justify-items	1 - 2	CSS Box Align L3
place-content	align-content, justify-content	1 - 2	CSS Box Align L3
place-self	align-self, justify-self	1 - 2	CSS Box Align L3
inset	top, right, bottom, left	1 - 4	CSS Logical Props L1
margin-inline	margin-inline-start, margin-inline-end	1 - 2	CSS Logical Props L1
margin-block	margin-block-start, margin-block-end	1 - 2	CSS Logical Props L1
padding-inline	padding-inline-start, padding-inline-end	1 - 2	CSS Logical Props L1
padding-block	padding-block-start, padding-block-end	1 - 2	CSS Logical Props L1
transition	transition-property, transition-duration, transition-timing-function, transition-delay	1 - 4 per layer	CSS Transitions L1
animation	animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state	1 - 8 per layer	CSS Animations L1
columns	column-width, column-count	1 - 2	CSS Multi-column L1
text-decoration	text-decoration-line, text-decoration-style, text-decoration-color	1 - 3	CSS Text Decoration L3

Frequently Asked Questions

The CSS specification defines border as an unordered shorthand. The parser classifies each token by type: length values or width keywords (thin, medium, thick) map to border-width, style keywords (solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden) map to border-style, and everything else maps to border-color. Missing components receive their initial values (medium, none, currentColor respectively). This grammar-based approach matches how browsers parse the property.

Yes. For example, the border shorthand first splits into border-width, border-style, and border-color. Each of those is itself a 4-side shorthand, which the tool then expands into border-top-width, border-right-width, border-bottom-width, border-left-width, and so on. The result is 12 fully longhand declarations from a single border line.

The border-radius property accepts the pattern a b c d / e f g h where the values before the slash define horizontal radii and those after define vertical radii. The converter splits on the / character, applies the 1-to-4 box-model expansion independently to each group, then combines them as border-top-left-radius: h-val v-val for each corner. If no slash is present, horizontal and vertical radii are identical.

Unrecognized properties pass through verbatim. The converter only modifies declarations whose property name matches its internal shorthand dictionary. Comments, custom properties (--var), and unknown vendor-prefixed properties are preserved exactly as written. This ensures the output CSS remains functionally equivalent to the input.

The font shorthand requires font-size and font-family at minimum. The converter detects the size/line-height pattern (e.g., 16px/1.5) by splitting on the / character within that token. Preceding values are matched against font-style keywords (italic, oblique), font-variant (small-caps), and font-weight (bold, 100-900). Everything after the size/line-height token is treated as font-family. Missing optional components are set to their initial values: normal for style, variant, and weight.

The parser strips the !important flag from the shorthand value string before expansion, then appends it to every generated longhand declaration. This matches the CSS cascade behavior where a shorthand !important applies to all its longhands. The flag is preserved character-for-character to maintain compatibility with minified or irregular formatting.

Yes. The converter processes full CSS including selectors, media queries, and other at-rules. It walks each declaration block, expands recognized shorthand properties within their rule context, and preserves the overall stylesheet structure. Nested at-rules like @media and @supports are handled recursively.