CSS Logical Properties Converter

What are CSS logical properties?

Ordinary CSS box-model properties — margin-left, padding-right, width, top — describe layout in fixed physical directions. That works as long as every page is read left-to-right, top-to-bottom. It breaks the moment your site supports a right-to-left language (Arabic, Hebrew, Persian, Urdu) or a vertical writing mode: a margin-left: 16px meant to sit before a heading ends up after it once the layout flips, because "left" never moved even though "before" did.

Logical properties describe layout relative to the flow of content instead of the screen edges: inline-start/inline-end replace left/right, and block-start/block-end replace top/bottom. In the default horizontal LTR writing mode — most of the web — inline-start renders as left, so nothing visually changes. Switch to RTL or a vertical writing mode, though, and logical properties automatically re-orient with the content while physical properties stay pinned to the wrong side.

This matters even without RTL plans today: logical properties describe intent ("space before this element in reading order"), and browsers, design systems, and frameworks (Tailwind's ms-/me- utilities included) are converging on them.

How to use this tool

1. Paste a block of CSS into the input box — any selectors, comments, and formatting are fine.
2. Choose a direction: Physical to Logical converts margin-left, width, top, text-align: left, and similar properties to their logical equivalents; Logical to Physical converts the other way, useful when you need physical fallbacks for older tooling.
3. The converted CSS appears instantly. Copy it or download it as a .css file.

Only the properties in the table below are touched — selectors, braces, comments, unrecognized declarations, and indentation pass through exactly as written.

Mapping table (LTR — the standard assumption)

Physical	Logical
margin-left / -right / -top / -bottom	margin-inline-start / -inline-end / -block-start / -block-end
padding-left / -right / -top / -bottom	padding-inline-start / -inline-end / -block-start / -block-end
border-left / -right / -top / -bottom (and -width/-color/-style)	border-inline-start / -inline-end / -block-start / -block-end (and variants)
width / height	inline-size / block-size
min-/max-width/height	min-/max-inline-size / block-size
top / bottom / left / right	inset-block-start / -block-end / -inline-start / -inline-end
text-align: left / right	text-align: start / end

The tool assumes the standard horizontal LTR writing mode, so inline-start = left and inline-end = right — the simplification used across nearly all logical-properties documentation, since flipping it only matters once an element actually sets direction: rtl or a vertical writing-mode.

FAQ

Will this catch every physical property in my stylesheet? It covers the standard box-model, sizing, inset, and text-align pairs above. Properties outside that set (background-position, transform, border-radius corners) are left untouched rather than guessed at.

Does it handle multiple declarations on one line? No — it reads one property: value; declaration per line. Format minified CSS first so each declaration has its own line.

Why does text-align keep its name but change its value? text-align has always accepted logical keywords (start/end) alongside physical ones — there's no separate logical property name. Only the value changes.

Privacy

This tool runs entirely in your browser. Your CSS is never uploaded to a server.