広告が嫌いですか? 行く広告なし今日 

CSS Logical Properties Converter

開発者

広告削除する？

入力

自動処理

出力

クライアント側

広告削除する？

ガイド

CSS Logical Properties Converter

Paste a block of CSS and instantly swap physical box-model properties (margin-left, padding-right, border-top-left-radius, top/left/right/bottom, width/height) for their writing-mode-aware logical equivalents (margin-inline-start, padding-inline-end, border-start-start-radius, inset-block-start, inline-size) — or reverse the conversion. The mapping is fully deterministic and covers margin, padding, border, border-radius corners, inset positions, sizing, overflow, plus directional values for text-align, float and clear.

使用方法

Paste your CSS in the input box.
方向を選択 — Physical → Logical for i18n-ready CSS, or Logical → Physical to see the visual equivalent.
Choose a writing mode — LTR (inline-start = left) or RTL (inline-start = right) — to control how left/right map.
Copy or download the converted CSS from the right pane.

機能

2方向変換 – Physical → Logical and Logical → Physical with one click.
Full property coverage – margin, padding, border longhand and individual sides, border-radius corners, top/right/bottom/left insets, width/height + min/max, overflow-x/y.
Directional values – Converts text-align, float and clear values (left/right ↔ start/end / inline-start/inline-end).
Writing-mode aware – LTR/RTL selector controls which physical side maps to inline-start.
リアルタイム変換 – Output updates as you type or toggle options.
Safe for shorthands – Property names are anchored so border-top-left-radius is never confused with a stray left declaration.
クライアントサイドのみ – Nothing is uploaded to a server.

 よくある質問

What are CSS logical properties?

Logical properties describe the box model in terms of inline-start, inline-end, block-start and block-end instead of left, right, top and bottom. They follow the element's writing-mode and direction, so the same rule flips automatically between LTR and RTL languages.
Why use logical properties instead of physical ones?

They make a single stylesheet work for left-to-right and right-to-left languages without RTL-specific overrides, and they extend naturally to vertical writing modes used by Japanese, Chinese and Mongolian scripts.
How does the inline-start direction map to a physical side?

In horizontal-tb writing mode, inline-start is the left edge in LTR and the right edge in RTL. block-start is always the top in horizontal writing modes. In vertical-rl or vertical-lr modes, block-start and inline-start rotate to physical sides accordingly.
Are logical properties supported by browsers?

All evergreen browsers — Chrome, Edge, Firefox and Safari — support the margin-*, padding-*, border-*, inset-*, inline-size and block-size logical properties. Older shipping versions back to 2020 cover most of the surface, with border-start-start-radius corners and overflow-inline/block being the most recent additions.
Why does the converter leave the margin and padding shorthands alone?

The four-value margin and padding shorthands are positional (top right bottom left), and CSS does not have an equivalent four-value logical shorthand, so a safe one-to-one conversion is not possible. Only longhand declarations like margin-left or padding-block-start can be transformed deterministically.