CSS Logical Properties Generator

Write direction-aware CSS that works for RTL and LTR layouts — click any property to copy

LTR (English)

margin-inline-start: 2rem
padding-block: 1rem
border-inline-start: 4px solid

RTL (Arabic)

margin-inline-start: 2rem
padding-block: 1rem
border-inline-start: 4px solid
Physical PropertyLogical PropertyLTR maps toRTL maps to
margin-leftmargin-inline-startleftright
margin-rightmargin-inline-endrightleft
margin-topmargin-block-starttoptop
margin-bottommargin-block-endbottombottom
padding-leftpadding-inline-startleftright
padding-rightpadding-inline-endrightleft
leftinset-inline-startleftright
rightinset-inline-endrightleft
topinset-block-starttoptop
border-leftborder-inline-startleftright
widthinline-sizewidthwidth
heightblock-sizeheightheight
text-align: lefttext-align: startleftright
float: leftfloat: inline-startleftright

Example CSS

/* Logical properties — works for LTR and RTL */ .card { margin-block: 1rem; margin-inline: auto; padding-block: 1.5rem; padding-inline: 2rem; border-inline-start: 4px solid #8b5cf6; inline-size: 100%; max-inline-size: 600px; text-align: start; } /* Shorthand */ .card { margin: 1rem auto; /* block inline */ padding: 1.5rem 2rem; /* block inline */ inset: 0; /* all sides */ }