Anyone who has been in programming for a while has gotten used to writing margin-left, padding-right, and rounded-l almost automatically. It’s muscle memory for any developer, and most people still write CSS like this:

margin-left: 16px;
padding-right: 8px;
border-top-left-radius: 6px;

Or, in Tailwind:

rounded-l-sm
border-r-0
ml-4

It works. It always has!

But there are situations where this stops being just a detail and starts becoming a problem. Or rather, moments where it requires a bit more attention from us.

The interesting part? Modern CSS has already solved this for years. The solution is right there, ready to use. But almost nobody uses it — and many developers don’t even know it exists.

The Problem

left and right are physical properties. They know nothing about layout direction.

When you change dir=”rtl”, the content flips — but left is still the physical left side of the screen.

The result?
• Broken borders
• Incorrect rounded corners
• Buttons that no longer look like part of the same block
• Visually misaligned layouts

It’s not uncommon to see a simple rounded-l or rounded-r break the visual consistency when the layout direction changes.

The Solution: Logical Properties

Modern CSS includes logical properties that respect the document’s direction.

margin-inline-start
padding-inline-end
border-start-start-radius

These properties adapt automatically:

• In LTR → start = left
• In RTL → start = right

You write it once. It works in both directions.

In Tailwind you can use:

rounded-s-sm
rounded-e-sm
border-e-0
ms-4

Simple as that!

It’s Not Just About RTL

Even if your product doesn’t support RTL today:

• It’s more robust.
• It prevents future bugs.
• It keeps your code semantically correct.
• It makes your design system ready for internationalization.

It’s like using rem instead of px. You can ignore it… until the day you actually need it.

Practical Rule

If you’re dealing with horizontal direction in layout, use:

• start / end
• inline-start / inline-end
• rounded-s / rounded-e
• border-s / border-e

Leave left and right for truly physical cases (like very specific absolute positioning).

CSS has evolved. Most of us just haven’t changed the habit yet.