CSS Logical Properties Guide

Your RTL layout works — until you realize every margin-left, padding-right, and border-left needs a [dir="rtl"] override. That’s 200+ properties to mirror manually, and if you miss one, the Arabic or Hebrew version of your UI has a spacing glitch that QA won’t catch until launch week. CSS logical properties eliminate the entire problem: write margin-inline-start once, and it resolves to left in LTR and right in RTL automatically.

Why This Reference (Not MDN’s 12 Separate Pages)

MDN documents each logical property on its own page — margin-inline-start, padding-block-end, inset-inline-start, inline-size — with no unified mapping table. This reference puts all 26 physical-to-logical mappings on one page with a writing mode toggle (LTR, RTL, vertical-rl, vertical-lr) so you can see how every property resolves in each context. Includes a CSS converter that generates fallbacks. Everything runs in your browser; no data is sent anywhere.

What Are CSS Logical Properties?

CSS logical properties are CSS properties that map to physical sides (top, right, bottom, left) based on the document’s writing mode and text direction — rather than being hard-coded to a specific physical edge.

Instead of writing margin-left, you write margin-inline-start. In a left-to-right (LTR) horizontal layout, inline-start maps to left. In a right-to-left (RTL) layout, the same margin-inline-start automatically maps to right. Your CSS adapts to the language without any changes.

/* Physical — hard-coded, never adapts */
.card {
  margin-left: 16px;
  padding-top: 24px;
  border-right: 1px solid;
  width: 320px;
}

/* Logical — adapts to writing mode */
.card {
  margin-inline-start: 16px;
  padding-block-start: 24px;
  border-inline-end: 1px solid;
  inline-size: 320px;
}

The Two Logical Axes

CSS logical properties replace the four physical directions (top/right/bottom/left) with two axes:

Block Axis

The block axis runs perpendicular to the flow of inline content (text). In horizontal writing modes, the block axis is vertical (top → bottom). In vertical writing modes, the block axis is horizontal.

• block-start — the start of the block axis (top in horizontal-tb)
• block-end — the end of the block axis (bottom in horizontal-tb)

Inline Axis

The inline axis runs along the direction of text flow. In horizontal LTR, the inline axis is left → right.

• inline-start — where inline content begins (left in LTR, right in RTL)
• inline-end — where inline content ends (right in LTR, left in RTL)

Physical to Logical: Complete Property Map

Spacing: Margin & Padding

Shorthand logical properties also exist:

/* Sets block-start and block-end (like margin-top + margin-bottom) */
margin-block: 16px;

/* Sets inline-start and inline-end (like margin-left + margin-right) */
margin-inline: 24px;

/* Same for padding */
padding-block: 16px;
padding-inline: 24px;

Borders

Border radius logical properties:

border-start-start-radius: 8px;  /* = border-top-left-radius in LTR */
border-start-end-radius: 8px;    /* = border-top-right-radius in LTR */
border-end-start-radius: 8px;    /* = border-bottom-left-radius in LTR */
border-end-end-radius: 8px;      /* = border-bottom-right-radius in LTR */

Positioning (Inset)

The inset shorthand also works logically:

/* Logical shorthand equivalents */
inset-block: 0;   /* top: 0; bottom: 0 */
inset-inline: 0;  /* left: 0; right: 0 (in LTR) */

Sizing

Text Alignment & Float

How Writing Modes Affect the Mapping

The logical-to-physical mapping depends on two CSS properties: writing-mode and direction.

horizontal-tb + direction: ltr (Default — English)

Block axis:  top → bottom
Inline axis: left → right

block-start  = top
block-end    = bottom
inline-start = left
inline-end   = right

horizontal-tb + direction: rtl (Arabic, Hebrew)

Block axis:  top → bottom  (unchanged)
Inline axis: right → left  (flipped)

block-start  = top
block-end    = bottom
inline-start = right   ← now right
inline-end   = left    ← now left

vertical-rl (Traditional Chinese, Japanese)

Block axis:  right → left
Inline axis: top → bottom

block-start  = right   ← now right
block-end    = left    ← now left
inline-start = top
inline-end   = bottom

vertical-lr (Mongolian script)

Block axis:  left → right
Inline axis: top → bottom

block-start  = left
block-end    = right
inline-start = top
inline-end   = bottom

Practical Examples

Internationalized Navigation

A navigation layout that works for both LTR and RTL languages without duplicating styles:

.nav {
  /* Physical approach — needs overrides for RTL */
  padding-left: 16px;
  border-left: 3px solid blue;
}

/* Override needed for RTL */
[dir="rtl"] .nav {
  padding-left: 0;
  padding-right: 16px;
  border-left: none;
  border-right: 3px solid blue;
}

/* Logical approach — one rule, works everywhere */
.nav {
  padding-inline-start: 16px;
  border-inline-start: 3px solid blue;
}

Card Component

.card {
  inline-size: 320px;        /* width in horizontal modes */
  padding-block: 20px;       /* padding-top + padding-bottom */
  padding-inline: 24px;      /* padding-left + padding-right (LTR) */
  border-block-end: 1px solid currentColor; /* border-bottom in LTR */
  margin-inline: auto;       /* center horizontally (like margin: 0 auto) */
}

Sticky Sidebar

.sidebar {
  position: sticky;
  inset-block-start: 0;     /* top: 0 in horizontal mode */
  inset-inline-start: 0;    /* left: 0 in LTR, right: 0 in RTL */
  block-size: 100vh;        /* height: 100vh in horizontal mode */
  min-inline-size: 240px;   /* min-width in horizontal mode */
}

Tooltip Arrow (Using border-radius logical)

.tooltip {
  border-start-start-radius: 0;  /* no radius at arrow corner */
  border-start-end-radius: 6px;
  border-end-start-radius: 6px;
  border-end-end-radius: 6px;
}

When to Use Logical Properties

Use logical properties when:

• Building internationalized (i18n) UI that must support RTL languages
• Building design systems or component libraries used across products with different language directions
• Working with vertical writing modes (East Asian typography, CSS writing systems)
• You want future-proof code that naturally scales to new locales

Physical properties are still fine when:

• The visual meaning is inherently directional and not related to text flow (e.g., border-bottom on an underline effect, margin-top for spacing from a page header)
• You’re building a product you know will only ever be LTR
• The property doesn’t have a logical equivalent yet (e.g., border-radius individual corners do, but some properties lag behind)

Browser Support

All major logical properties have excellent browser support (95%+ global coverage as of 2025):

• margin-block, margin-inline, padding-block, padding-inline — all modern browsers
• border-block, border-inline — all modern browsers
• inset, inset-block, inset-inline — all modern browsers
• inline-size, block-size — all modern browsers
• border-start-start-radius and other logical border-radius — Chrome 89+, Firefox 66+, Safari 15+

No vendor prefixes are needed for any logical properties in modern browsers.

Frequently Asked Questions

Do logical properties work in Flexbox and Grid? Yes. gap in Flexbox/Grid uses the block and inline axes automatically. Properties like align-items and justify-content also follow the block/inline model. You don’t need logical properties for the Flex/Grid axis properties themselves — they’re already logical by design.

Are there logical shorthand properties? Yes. margin-block sets both margin-block-start and margin-block-end in one declaration. Similarly for margin-inline, padding-block, padding-inline, border-block, border-inline, inset-block, inset-inline, and the plain inset (sets all four logical sides).

What is the difference between writing-mode and direction? writing-mode controls whether text flows horizontally or vertically and the direction of the block axis. direction controls the inline text direction (LTR or RTL) within a horizontal writing mode. For RTL languages, you typically set direction: rtl on the <html> or a container element. writing-mode is used for vertical text layouts.

Should I replace all physical properties with logical ones? Not necessarily. Migrate gradually and focus on properties where directionality matters: spacing, positioning, and borders on text-aligned sides. Properties where the visual meaning is absolute (like a border-bottom underline decoration) are fine to leave as physical.

Can I mix logical and physical properties? Yes, but avoid setting the same dimension using both systems. For example, don’t set both width and inline-size on the same element — the last declaration wins. Pick one system per property dimension.