CSS Logical Properties Converter

For two-value shorthands like margin: 16px 24px, the converter maps the first value (block axis) to margin-block and the second (inline axis) to margin-inline. Four-value shorthands like margin: 10px 20px 30px 40px (top right bottom left) become margin-block: 10px 30px; margin-inline: 40px 20px. Single-value shorthands pass through unchanged since they already apply equally to all sides.

No. In a standard horizontal LTR document, logical properties are functionally identical to their physical counterparts. The difference only manifests when direction or writing-mode changes.

It shows the same element with physical vs. logical margin properties applied, in LTR, RTL, and vertical-rl writing modes. Physical margins stay fixed to screen edges; logical margins follow the text flow direction - which is exactly the difference you want when building internationalised UIs.

Click any converted (blue) line to revert it individually, or click a reverted (amber) line to restore it. To start over completely, click Clear and re-paste your CSS.

CSS logical properties define layout relative to a document's block flow direction and inline direction, rather than physical screen edges like top, left, right, and bottom. Instead of margin-left, you write margin-inline-start; instead of padding-top, you write padding-block-start. Because they are flow-relative, they automatically adapt when the writing direction changes - for example in RTL languages like Arabic and Hebrew, or vertical writing modes like Japanese - without any extra overrides in your CSS.

The block axis runs in the direction that blocks stack - in a standard horizontal document this is top to bottom. The inline axis runs in the direction that text flows - left to right in LTR languages, right to left in RTL languages. In a vertical writing mode like writing-mode: vertical-rl, the two axes swap: the block axis runs left to right and the inline axis runs top to bottom. Logical properties like margin-block-start and margin-inline-end always refer to these relative axes, so they remain semantically correct regardless of writing mode.

width maps to inline-size and height maps to block-size. In a standard horizontal writing mode these are identical in effect, but in a vertical writing mode the axes swap - so inline-size would control what was previously the vertical dimension. This is why the converter flags width and height conversions as worth reviewing: if you are deliberately sizing an element relative to the physical screen (a fixed overlay, a full-height sidebar, an image), keeping the physical property is usually the right choice.

The four physical inset properties map to their logical counterparts as follows: top → inset-block-start, bottom → inset-block-end, left → inset-inline-start, right → inset-inline-end. You can also use the inset shorthand, which accepts the same one-to-four value syntax as margin but applies to all four inset sides at once.

It depends on intent. Use text-align: start and text-align: end when you want text to align with the natural start or end of the inline direction - this is the right choice for most body text and UI labels that should mirror automatically in RTL layouts. Keep text-align: left or text-align: right only when text must be pinned to a specific physical edge regardless of locale - for example, a column of numbers that must always appear on the right side of the screen.

All major logical properties for margin, padding, border, sizing, and positioning have been supported in Chrome, Firefox, Safari, and Edge since 2019–2021. Newer additions such as overflow-inline, overflow-block, and the logical border-radius variants (border-start-start-radius etc.) are supported in all current browser versions. For older browser support, declare the physical property first as a fallback and the logical property second - browsers that do not understand logical properties will ignore the second declaration gracefully.

Certain properties have logical equivalents that behave differently depending on writing mode, so a blind conversion could change layout behaviour in ways you may not intend. The converter highlights these in amber to draw your attention. The main cases are: width and height (axes swap in vertical writing modes), text-align: left/right (may need to stay physical for design reasons), float and clear with left/right values, and four-value margin or padding shorthands where the value order changes in the expanded logical form.

You can mix physical and logical properties in the same stylesheet - there is no requirement to convert everything at once. A common approach is to convert spacing and sizing properties (margin, padding, width, height) to logical equivalents first, since these provide the most benefit for internationalisation, and leave positioning or float properties physical until you are confident in the behaviour across writing modes. The per-line revert control in this tool is designed exactly for this incremental workflow.

Each physical corner maps to a logical equivalent using start/end naming: border-top-left-radius → border-start-start-radius, border-top-right-radius → border-start-end-radius, border-bottom-left-radius → border-end-start-radius, border-bottom-right-radius → border-end-end-radius. The naming convention follows block axis first (start/end) then inline axis (start/end), so border-start-end-radius means the corner at the block-start edge and the inline-end edge.