CSS Logical Properties Converter
Convert physical CSS properties (margin-left, padding-top, width) to writing-mode-aware logical equivalents (margin-inline-start, padding-block-start, inline-size) and back.
How to Use the CSS Logical Properties Converter
1
Paste Your CSS
Copy any CSS block containing physical properties like margin-left, padding-top, width, top, or border-radius into the input area.
2
Choose Direction & Writing Mode
Select Physical → Logical to generate RTL-friendly CSS, or Logical → Physical for the reverse. Choose LTR or RTL to control how inline-start maps.
3
Copy the Result
Review the converted CSS with highlighted changes. Click Copy to paste into your stylesheet. Test by switching your HTML dir attribute.
Physical ↔ Logical Property Reference
| Physical | Logical (LTR) | Logical (RTL) |
|---|---|---|
| margin-left | margin-inline-start | margin-inline-end |
| margin-right | margin-inline-end | margin-inline-start |
| padding-top | padding-block-start | padding-block-start |
| padding-bottom | padding-block-end | padding-block-end |
| border-left-width | border-inline-start-width | border-inline-end-width |
| top | inset-block-start | inset-block-start |
| left | inset-inline-start | inset-inline-end |
| width | inline-size | inline-size |
| height | block-size | block-size |
Frequently Asked Questions
CSS logical properties let you write CSS that adapts to different writing modes and text directions. Instead of using physical directions like left, right, top, bottom, you use flow-relative terms like inline-start, inline-end, block-start, and block-end. This makes your layouts automatically work in LTR, RTL, and vertical writing modes.
Logical properties make your layouts truly international. A component using margin-inline-start will automatically flip from left to right margin when the page direction changes from LTR to RTL. This eliminates the need for separate RTL stylesheets or direction-specific overrides.
All margin, padding, border side and corner properties, inset properties (top/right/bottom/left), sizing (width/height), overflow-x/y, text-align, float, clear, and resize. Four-value shorthands like margin: 1px 2px 3px 4px cannot be automatically converted because their order is positional, not directional.
Chrome 87+, Edge 87+, Safari 15+, and Firefox 66+ support the core set of logical properties. Some shorthand variants are newer. The core longhand properties (margin-inline-start, padding-block-end, etc.) are broadly supported across all modern browsers.
No. You can mix physical and logical properties in the same stylesheet. A common migration strategy is to use logical properties for new components and gradually convert existing ones. The properties work alongside each other — the cascade resolves conflicts normally.
Ad