13 properties converted
Logical CSS
Logical Properties Output Copy CSS
.container { inline-size : 640px ; min-block-size : 200px ; margin-block-start : 1.5rem ; margin-block-end : 1.5rem ; margin-inline-start : auto ; margin-inline-end : auto ; padding-inline-start : 1.5rem ; padding-inline-end : 1.5rem ; border-inline-start : 3px solid #1D9E75 ; border-start-start-radius : 8px ; border-end-start-radius : 8px ; text-align : start ; overflow-inline : hidden ; } Property reference
Physical (LTR) Logical equivalent margin-top / bottom margin-block-start / end margin-left / right margin-inline-start / end padding-top / bottom padding-block-start / end padding-left / right padding-inline-start / end border-top / bottom border-block-start / end border-left / right border-inline-start / end border-top-left-radius border-start-start-radius border-bottom-left-radius border-end-start-radius top / bottom inset-block-start / end left / right inset-inline-start / end width / height inline-size / block-size min/max-width min/max-inline-size min/max-height min/max-block-size overflow-x / y overflow-inline / block text-align: left/right text-align: start/end float: left/right float: inline-start/end
Logical properties adapt to writing-mode, direction, and text-orientation — essential for RTL and vertical-script support.
How to use 01 Paste your CSS Paste any CSS rule set into the left panel. The default shows a typical LTR component with margin, padding, and border declarations.
02 See the conversion The right panel shows the logical equivalent in real time. Changed lines are automatically highlighted.
03 Copy the output Hit Copy CSS to grab the converted logical properties block.
04 Check the reference The mapping table below lists all physical ↔ logical property pairs for quick reference.
