CSS Logical Properties Reference

Complete guide to CSS logical properties for building internationalization-ready layouts.
Click any property to copy the code.

Margin Properties Padding Properties Border Properties Border Radius Sizing Properties Position Properties (Inset)Text Alignment Float & Clear

What are CSS Logical Properties?

Logical properties adapt to the document's writing mode and direction. Instead of physical directions (top, right, bottom, left), they use flow-relative terms:

Block Axis

The direction blocks stack (vertical in horizontal writing modes like English).block-start is top, block-end is bottom.

Inline Axis

The direction text flows (horizontal in LTR/RTL languages).inline-start is left in LTR, right in RTL.

Why Use Logical Properties?

1.
Internationalization (i18n)
Layouts automatically adapt to RTL languages like Arabic and Hebrew without separate stylesheets.
2.
Vertical Writing Modes
Support languages like Japanese that can be written vertically with no extra CSS.
3.
Cleaner Mental Model
Think in terms of content flow rather than physical screen positions.
4.
Useful Shorthands
margin-inline: auto centers horizontally in one line.

Margin Properties

Logical equivalents for margin properties

margin-top→margin-block-start

Margin at the start of the block axis

margin-block-start: 1rem;

Click to copy

margin-bottom→margin-block-end

Margin at the end of the block axis

margin-block-end: 1rem;

Click to copy

margin-left→margin-inline-start

Margin at the start of the inline axis

margin-inline-start: 1rem;

Click to copy

margin-right→margin-inline-end

Margin at the end of the inline axis

margin-inline-end: 1rem;

Click to copy

margin-top + margin-bottom→margin-block

Shorthand for block-start and block-end margins

margin-block: 1rem 2rem;

Click to copy

margin-left + margin-right→margin-inline

Shorthand for inline-start and inline-end margins

margin-inline: auto;

Click to copy

Padding Properties

Logical equivalents for padding properties

padding-top→padding-block-start

Padding at the start of the block axis

padding-block-start: 1rem;

Click to copy

padding-bottom→padding-block-end

Padding at the end of the block axis

padding-block-end: 1rem;

Click to copy

padding-left→padding-inline-start

Padding at the start of the inline axis

padding-inline-start: 1rem;

Click to copy

padding-right→padding-inline-end

Padding at the end of the inline axis

padding-inline-end: 1rem;

Click to copy

padding-top + padding-bottom→padding-block

Shorthand for block-start and block-end padding

padding-block: 2rem;

Click to copy

padding-left + padding-right→padding-inline

Shorthand for inline-start and inline-end padding

padding-inline: 1.5rem;

Click to copy

Border Properties

Logical equivalents for border properties

border-top→border-block-start

Border at the start of the block axis

border-block-start: 1px solid #ccc;

Click to copy

border-bottom→border-block-end

Border at the end of the block axis

border-block-end: 2px solid blue;

Click to copy

border-left→border-inline-start

Border at the start of the inline axis

border-inline-start: 3px solid red;

Click to copy

border-right→border-inline-end

Border at the end of the inline axis

border-inline-end: 1px dashed gray;

Click to copy

border-top + border-bottom→border-block

Shorthand for block borders

border-block: 1px solid #e5e7eb;

Click to copy

border-left + border-right→border-inline

Shorthand for inline borders

border-inline: 2px solid #3b82f6;

Click to copy

Border Radius

Logical equivalents for border-radius

border-top-left-radius→border-start-start-radius

Radius at block-start + inline-start corner

border-start-start-radius: 8px;

Click to copy

border-top-right-radius→border-start-end-radius

Radius at block-start + inline-end corner

border-start-end-radius: 8px;

Click to copy

border-bottom-left-radius→border-end-start-radius

Radius at block-end + inline-start corner

border-end-start-radius: 8px;

Click to copy

border-bottom-right-radius→border-end-end-radius

Radius at block-end + inline-end corner

border-end-end-radius: 8px;

Click to copy

Sizing Properties

Logical equivalents for width and height

width→inline-size

Size in the inline axis (width in horizontal writing)

inline-size: 300px;

Click to copy

height→block-size

Size in the block axis (height in horizontal writing)

block-size: 200px;

Click to copy

min-width→min-inline-size

Minimum size in the inline axis

min-inline-size: 100px;

Click to copy

max-width→max-inline-size

Maximum size in the inline axis

max-inline-size: 600px;

Click to copy

min-height→min-block-size

Minimum size in the block axis

min-block-size: 50px;

Click to copy

max-height→max-block-size

Maximum size in the block axis

max-block-size: 400px;

Click to copy

Position Properties (Inset)

Logical equivalents for top, right, bottom, left

top→inset-block-start

Position from the start of the block axis

inset-block-start: 0;

Click to copy

bottom→inset-block-end

Position from the end of the block axis

inset-block-end: 10px;

Click to copy

left→inset-inline-start

Position from the start of the inline axis

inset-inline-start: 20px;

Click to copy

right→inset-inline-end

Position from the end of the inline axis

inset-inline-end: 0;

Click to copy

top + bottom→inset-block

Shorthand for block-start and block-end insets

inset-block: 10px 20px;

Click to copy

left + right→inset-inline

Shorthand for inline-start and inline-end insets

inset-inline: 0;

Click to copy

top + right + bottom + left→inset

Shorthand for all four insets

inset: 0;

Click to copy

Text Alignment

Logical values for text-align

text-align: left→text-align: start

Align text to the start of the inline axis

text-align: start;

Click to copy

text-align: right→text-align: end

Align text to the end of the inline axis

text-align: end;

Click to copy

Float & Clear

Logical values for float and clear

float: left→float: inline-start

Float to the start of the inline axis

float: inline-start;

Click to copy

float: right→float: inline-end

Float to the end of the inline axis

float: inline-end;

Click to copy

clear: left→clear: inline-start

Clear floats on the start of the inline axis

clear: inline-start;

Click to copy

clear: right→clear: inline-end

Clear floats on the end of the inline axis

clear: inline-end;

Click to copy

Writing Mode Examples

Logical properties adapt based on the writing-mode and direction properties:

LTR (English, Spanish)

inline-start → left

inline-end → right

RTL (Arabic, Hebrew)

inline-start → right

inline-end → left

Vertical (Japanese)

block → horizontal

inline → vertical

Browser Support

CSS logical properties have excellent browser support in all modern browsers.

Browser	Basic Properties	Shorthands	Border Radius
Chrome	69+	87+	89+
Firefox	41+	66+	66+
Safari	12.1+	14.1+	15+
Edge	79+	87+	89+

Best Practices

Use for new projects

Start with logical properties in new projects. They work exactly like physical properties in LTR layouts but give you i18n support for free.

Prefer shorthands

Use margin-inline instead of separate start/end properties when values are the same.

Don't mix approaches

Be consistent within a component. Mixing margin-left and padding-inline makes code harder to maintain.

Inspect any website's CSS instantly

Frontend Hero's CSS Scanner shows you all CSS properties including logical properties, with full hover state support. Extract styles from any element in 2 clicks.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Selection Generator

Style text highlight colors

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →