Logical propertiesBaseline · Widely available

CSS logical properties control borders, size, margin, and padding with directions and dimensions relative to the writing mode. For example, in a left to right, top to bottom writing mode, block-end refers to the bottom. Also known as flow relative.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Sep 20, 2021. Widely available since Mar 20, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–88Not supported

89+Supportedsince Mar 2, 2021

Current: 155

Edge

12–88Not supported

89+Supportedsince Mar 4, 2021

Current: 154

Firefox

1–65Not supported

66+Supportedsince Mar 19, 2019

Current: 157

Safari

1–14.1Not supported

15+Supportedsince Sep 20, 2021

Current: 27

MobileChrome Android

18–88Not supported

89+Supportedsince Mar 2, 2021

Current: 155

Firefox Android

4–65Not supported

66+Supportedsince Mar 19, 2019

Current: 157

Safari iOS

1–14.5Not supported

15+Supportedsince Sep 20, 2021

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

CSS

.card {
  margin-block: 1rem;        /* top & bottom */
  padding-inline: 1.5rem;    /* left & right in LTR, flipped in RTL */
  border-inline-start: 4px solid var(--brand);
}

Feature detection

CSS · check before using

@supports (block-size: initial) {
  /* styles that rely on block-size */
}

/* or in JavaScript */
if (CSS.supports("block-size", "initial")) {
  // use it
}

Documentation (MDN)

Specification

drafts.csswg.org/css-logical-1 ↗

Usage share

caniuse.com/css-logical-props ↗

Sub-features

Support for each part of the feature (266). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
block-size	57	79	41	12.1	57	41	12.2
block-size.fit-content	57	79	94	12.1	57	94	12.2
block-size.max-content	57	79	66	12.1	57	66	12.2
block-size.min-content	57	79	66	12.1	57	66	12.2
border-block	87	87	66	14.1	87	66	14.5
border-block-color	87	87	66	14.1	87	66	14.5
border-block-color.currentColor	87	87	66	14.1	87	66	14.5
border-block-color.transparent	87	87	66	14.1	87	66	14.5
border-block-end	69	79	41	12.1	69	41	12.2
border-block-end-color	69	79	41	12.1	69	41	12.2
border-block-end-color.currentColor	69	79	41	12.1	69	41	12.2
border-block-end-color.transparent	69	79	41	12.1	69	41	12.2
border-block-end-style	69	79	41	12.1	69	41	12.2
border-block-end-style.dashed	69	79	41	12.1	69	41	12.2
border-block-end-style.dotted	69	79	41	12.1	69	41	12.2
border-block-end-style.double	69	79	41	12.1	69	41	12.2
border-block-end-style.groove	69	79	41	12.1	69	41	12.2
border-block-end-style.hidden	69	79	41	12.1	69	41	12.2
border-block-end-style.inset	69	79	41	12.1	69	41	12.2
border-block-end-style.none	69	79	41	12.1	69	41	12.2

Show 246 more

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
border-block-end-style.outset	69	79	41	12.1	69	41	12.2
border-block-end-style.ridge	69	79	41	12.1	69	41	12.2
border-block-end-style.solid	69	79	41	12.1	69	41	12.2
border-block-end-width	69	79	41	12.1	69	41	12.2
border-block-end-width.medium	69	79	41	12.1	69	41	12.2
border-block-end-width.thick	69	79	41	12.1	69	41	12.2
border-block-end-width.thin	69	79	41	12.1	69	41	12.2
border-block-end.currentColor	69	79	41	12.1	69	41	12.2
border-block-end.dashed	69	79	41	12.1	69	41	12.2
border-block-end.dotted	69	79	41	12.1	69	41	12.2
border-block-end.double	69	79	41	12.1	69	41	12.2
border-block-end.groove	69	79	41	12.1	69	41	12.2
border-block-end.hidden	69	79	41	12.1	69	41	12.2
border-block-end.inset	69	79	41	12.1	69	41	12.2
border-block-end.medium	69	79	41	12.1	69	41	12.2
border-block-end.none	69	79	41	12.1	69	41	12.2
border-block-end.outset	69	79	41	12.1	69	41	12.2
border-block-end.ridge	69	79	41	12.1	69	41	12.2
border-block-end.solid	69	79	41	12.1	69	41	12.2
border-block-end.thick	69	79	41	12.1	69	41	12.2
border-block-end.thin	69	79	41	12.1	69	41	12.2
border-block-end.transparent	69	79	41	12.1	69	41	12.2
border-block-start	69	79	41	12.1	69	41	12.2
border-block-start-color	69	79	41	12.1	69	41	12.2
border-block-start-color.currentColor	69	79	41	12.1	69	41	12.2
border-block-start-color.transparent	69	79	41	12.1	69	41	12.2
border-block-start-style	69	79	41	12.1	69	41	12.2
border-block-start-style.dashed	69	79	41	12.1	69	41	12.2
border-block-start-style.dotted	69	79	41	12.1	69	41	12.2
border-block-start-style.double	69	79	41	12.1	69	41	12.2
border-block-start-style.groove	69	79	41	12.1	69	41	12.2
border-block-start-style.hidden	69	79	41	12.1	69	41	12.2
border-block-start-style.inset	69	79	41	12.1	69	41	12.2
border-block-start-style.none	69	79	41	12.1	69	41	12.2
border-block-start-style.outset	69	79	41	12.1	69	41	12.2
border-block-start-style.ridge	69	79	41	12.1	69	41	12.2
border-block-start-style.solid	69	79	41	12.1	69	41	12.2
border-block-start-width	69	79	41	12.1	69	41	12.2
border-block-start-width.medium	69	79	41	12.1	69	41	12.2
border-block-start-width.thick	69	79	41	12.1	69	41	12.2
border-block-start-width.thin	69	79	41	12.1	69	41	12.2
border-block-start.currentColor	69	79	41	12.1	69	41	12.2
border-block-start.dashed	69	79	41	12.1	69	41	12.2
border-block-start.dotted	69	79	41	12.1	69	41	12.2
border-block-start.double	69	79	41	12.1	69	41	12.2
border-block-start.groove	69	79	41	12.1	69	41	12.2
border-block-start.hidden	69	79	41	12.1	69	41	12.2
border-block-start.inset	69	79	41	12.1	69	41	12.2
border-block-start.medium	69	79	41	12.1	69	41	12.2
border-block-start.none	69	79	41	12.1	69	41	12.2
border-block-start.outset	69	79	41	12.1	69	41	12.2
border-block-start.ridge	69	79	41	12.1	69	41	12.2
border-block-start.solid	69	79	41	12.1	69	41	12.2
border-block-start.thick	69	79	41	12.1	69	41	12.2
border-block-start.thin	69	79	41	12.1	69	41	12.2
border-block-start.transparent	69	79	41	12.1	69	41	12.2
border-block-style	87	87	66	14.1	87	66	14.5
border-block-style.dashed	87	87	66	14.1	87	66	14.5
border-block-style.dotted	87	87	66	14.1	87	66	14.5
border-block-style.double	87	87	66	14.1	87	66	14.5
border-block-style.groove	87	87	66	14.1	87	66	14.5
border-block-style.hidden	87	87	66	14.1	87	66	14.5
border-block-style.inset	87	87	66	14.1	87	66	14.5
border-block-style.none	87	87	66	14.1	87	66	14.5
border-block-style.outset	87	87	66	14.1	87	66	14.5
border-block-style.ridge	87	87	66	14.1	87	66	14.5
border-block-style.solid	87	87	66	14.1	87	66	14.5
border-block-width	87	87	66	14.1	87	66	14.5
border-block-width.medium	87	87	66	14.1	87	66	14.5
border-block-width.thick	87	87	66	14.1	87	66	14.5
border-block-width.thin	87	87	66	14.1	87	66	14.5
border-block.currentColor	87	87	66	14.1	87	66	14.5
border-block.dashed	87	87	66	14.1	87	66	14.5
border-block.dotted	87	87	66	14.1	87	66	14.5
border-block.double	87	87	66	14.1	87	66	14.5
border-block.groove	87	87	66	14.1	87	66	14.5
border-block.hidden	87	87	66	14.1	87	66	14.5
border-block.inset	87	87	66	14.1	87	66	14.5
border-block.medium	87	87	66	14.1	87	66	14.5
border-block.none	87	87	66	14.1	87	66	14.5
border-block.outset	87	87	66	14.1	87	66	14.5
border-block.ridge	87	87	66	14.1	87	66	14.5
border-block.solid	87	87	66	14.1	87	66	14.5
border-block.thick	87	87	66	14.1	87	66	14.5
border-block.thin	87	87	66	14.1	87	66	14.5
border-block.transparent	87	87	66	14.1	87	66	14.5
border-end-end-radius	89	89	66	15	89	66	15
border-end-start-radius	89	89	66	15	89	66	15
border-inline	87	87	66	14.1	87	66	14.5
border-inline-color	87	87	66	14.1	87	66	14.5
border-inline-color.currentColor	87	87	66	14.1	87	66	14.5
border-inline-color.transparent	87	87	66	14.1	87	66	14.5
border-inline-end	69	79	41	12.1	69	41	12.2
border-inline-end-color	69	79	41	12.1	69	41	12.2
border-inline-end-color.currentColor	69	79	41	12.1	69	41	12.2
border-inline-end-color.transparent	69	79	41	12.1	69	41	12.2
border-inline-end-style	69	79	41	12.1	69	41	12.2
border-inline-end-style.dashed	69	79	41	12.1	69	41	12.2
border-inline-end-style.dotted	69	79	41	12.1	69	41	12.2
border-inline-end-style.double	69	79	41	12.1	69	41	12.2
border-inline-end-style.groove	69	79	41	12.1	69	41	12.2
border-inline-end-style.hidden	69	79	41	12.1	69	41	12.2
border-inline-end-style.inset	69	79	41	12.1	69	41	12.2
border-inline-end-style.none	69	79	41	12.1	69	41	12.2
border-inline-end-style.outset	69	79	41	12.1	69	41	12.2
border-inline-end-style.ridge	69	79	41	12.1	69	41	12.2
border-inline-end-style.solid	69	79	41	12.1	69	41	12.2
border-inline-end-width	69	79	41	12.1	69	41	12.2
border-inline-end-width.medium	69	79	41	12.1	69	41	12.2
border-inline-end-width.thick	69	79	41	12.1	69	41	12.2
border-inline-end-width.thin	69	79	41	12.1	69	41	12.2
border-inline-end.currentColor	69	79	41	12.1	69	41	12.2
border-inline-end.dashed	69	79	41	12.1	69	41	12.2
border-inline-end.dotted	69	79	41	12.1	69	41	12.2
border-inline-end.double	69	79	41	12.1	69	41	12.2
border-inline-end.groove	69	79	41	12.1	69	41	12.2
border-inline-end.hidden	69	79	41	12.1	69	41	12.2
border-inline-end.inset	69	79	41	12.1	69	41	12.2
border-inline-end.medium	69	79	41	12.1	69	41	12.2
border-inline-end.none	69	79	41	12.1	69	41	12.2
border-inline-end.outset	69	79	41	12.1	69	41	12.2
border-inline-end.ridge	69	79	41	12.1	69	41	12.2
border-inline-end.solid	69	79	41	12.1	69	41	12.2
border-inline-end.thick	69	79	41	12.1	69	41	12.2
border-inline-end.thin	69	79	41	12.1	69	41	12.2
border-inline-end.transparent	69	79	41	12.1	69	41	12.2
border-inline-start	69	79	41	12.1	69	41	12.2
border-inline-start-color	69	79	41	12.1	69	41	12.2
border-inline-start-color.currentColor	69	79	41	12.1	69	41	12.2
border-inline-start-color.transparent	69	79	41	12.1	69	41	12.2
border-inline-start-style	69	79	41	12.1	69	41	12.2
border-inline-start-style.dashed	69	79	41	12.1	69	41	12.2
border-inline-start-style.dotted	69	79	41	12.1	69	41	12.2
border-inline-start-style.double	69	79	41	12.1	69	41	12.2
border-inline-start-style.groove	69	79	41	12.1	69	41	12.2
border-inline-start-style.hidden	69	79	41	12.1	69	41	12.2
border-inline-start-style.inset	69	79	41	12.1	69	41	12.2
border-inline-start-style.none	69	79	41	12.1	69	41	12.2
border-inline-start-style.outset	69	79	41	12.1	69	41	12.2
border-inline-start-style.ridge	69	79	41	12.1	69	41	12.2
border-inline-start-style.solid	69	79	41	12.1	69	41	12.2
border-inline-start-width	69	79	41	12.1	69	41	12.2
border-inline-start-width.medium	69	79	41	12.1	69	41	12.2
border-inline-start-width.thick	69	79	41	12.1	69	41	12.2
border-inline-start-width.thin	69	79	41	12.1	69	41	12.2
border-inline-start.currentColor	69	79	41	12.1	69	41	12.2
border-inline-start.dashed	69	79	41	12.1	69	41	12.2
border-inline-start.dotted	69	79	41	12.1	69	41	12.2
border-inline-start.double	69	79	41	12.1	69	41	12.2
border-inline-start.groove	69	79	41	12.1	69	41	12.2
border-inline-start.hidden	69	79	41	12.1	69	41	12.2
border-inline-start.inset	69	79	41	12.1	69	41	12.2
border-inline-start.medium	69	79	41	12.1	69	41	12.2
border-inline-start.none	69	79	41	12.1	69	41	12.2
border-inline-start.outset	69	79	41	12.1	69	41	12.2
border-inline-start.ridge	69	79	41	12.1	69	41	12.2
border-inline-start.solid	69	79	41	12.1	69	41	12.2
border-inline-start.thick	69	79	41	12.1	69	41	12.2
border-inline-start.thin	69	79	41	12.1	69	41	12.2
border-inline-start.transparent	69	79	41	12.1	69	41	12.2
border-inline-style	87	87	66	14.1	87	66	14.5
border-inline-style.dashed	87	87	66	14.1	87	66	14.5
border-inline-style.dotted	87	87	66	14.1	87	66	14.5
border-inline-style.double	87	87	66	14.1	87	66	14.5
border-inline-style.groove	87	87	66	14.1	87	66	14.5
border-inline-style.hidden	87	87	66	14.1	87	66	14.5
border-inline-style.inset	87	87	66	14.1	87	66	14.5
border-inline-style.none	87	87	66	14.1	87	66	14.5
border-inline-style.outset	87	87	66	14.1	87	66	14.5
border-inline-style.ridge	87	87	66	14.1	87	66	14.5
border-inline-style.solid	87	87	66	14.1	87	66	14.5
border-inline-width	87	87	66	14.1	87	66	14.5
border-inline-width.medium	87	87	66	14.1	87	66	14.5
border-inline-width.thick	87	87	66	14.1	87	66	14.5
border-inline-width.thin	87	87	66	14.1	87	66	14.5
border-inline.currentColor	87	87	66	14.1	87	66	14.5
border-inline.dashed	87	87	66	14.1	87	66	14.5
border-inline.dotted	87	87	66	14.1	87	66	14.5
border-inline.double	87	87	66	14.1	87	66	14.5
border-inline.groove	87	87	66	14.1	87	66	14.5
border-inline.hidden	87	87	66	14.1	87	66	14.5
border-inline.inset	87	87	66	14.1	87	66	14.5
border-inline.medium	87	87	66	14.1	87	66	14.5
border-inline.none	87	87	66	14.1	87	66	14.5
border-inline.outset	87	87	66	14.1	87	66	14.5
border-inline.ridge	87	87	66	14.1	87	66	14.5
border-inline.solid	87	87	66	14.1	87	66	14.5
border-inline.thick	87	87	66	14.1	87	66	14.5
border-inline.thin	87	87	66	14.1	87	66	14.5
border-inline.transparent	87	87	66	14.1	87	66	14.5
border-start-end-radius	89	89	66	15	89	66	15
border-start-start-radius	89	89	66	15	89	66	15
clear.inline-end	118	118	55	15	118	55	15
clear.inline-start	118	118	55	15	118	55	15
float.inline-end	118	118	55	15	118	55	15
float.inline-start	118	118	55	15	118	55	15
inline-size	57	79	41	12.1	57	41	12.2
inline-size.fit-content	57	79	94	12.1	57	94	12.2
inline-size.max-content	57	79	66	12.1	57	66	12.2
inline-size.min-content	57	79	66	12.1	57	66	12.2
inset	87	87	66	14.1	87	66	14.5
inset-block	87	87	63	14.1	87	63	14.5
inset-block-end	87	87	63	14.1	87	63	14.5
inset-block-end.auto	87	87	63	14.1	87	63	14.5
inset-block-start	87	87	63	14.1	87	63	14.5
inset-block-start.auto	87	87	63	14.1	87	63	14.5
inset-block.auto	87	87	63	14.1	87	63	14.5
inset-inline	87	87	63	14.1	87	63	14.5
inset-inline-end	87	87	63	14.1	87	63	14.5
inset-inline-end.auto	87	87	63	14.1	87	63	14.5
inset-inline-start	87	87	63	14.1	87	63	14.5
inset-inline-start.auto	87	87	63	14.1	87	63	14.5
inset-inline.auto	87	87	63	14.1	87	63	14.5
inset.auto	87	87	66	14.1	87	66	14.5
margin-block	87	87	66	14.1	87	66	14.5
margin-block-end	69	79	41	12.1	69	41	12.2
margin-block-start	69	79	41	12.1	69	41	12.2
margin-inline	87	87	66	14.1	87	66	14.5
margin-inline-end	69	79	41	12.1	69	41	12.2
margin-inline-start	69	79	41	12.1	69	41	12.2
max-block-size	57	79	41	12.1	57	41	12.2
max-block-size.fit-content	57	79	94	12.1	57	94	12.2
max-block-size.max-content	57	79	66	12.1	57	66	12.2
max-block-size.min-content	57	79	66	12.1	57	66	12.2
max-inline-size	57	79	41	12.1	57	41	12.2
max-inline-size.fit-content	57	79	94	12.1	57	94	12.2
max-inline-size.max-content	57	79	66	12.1	57	66	12.2
max-inline-size.min-content	57	79	66	12.1	57	66	12.2
min-block-size	57	79	41	12.1	57	41	12.2
min-block-size.fit-content	57	79	94	12.1	57	94	12.2
min-block-size.max-content	57	79	66	12.1	57	66	12.2
min-block-size.min-content	57	79	66	12.1	57	66	12.2
min-inline-size	57	79	41	12.1	57	41	12.2
min-inline-size.fit-content	57	79	94	12.1	57	94	12.2
min-inline-size.max-content	57	79	66	12.1	57	66	12.2
min-inline-size.min-content	57	79	66	12.1	57	66	12.2
overflow-block	135	135	69	26	135	79	26
overflow-block.overlay	135	135	112	✕	135	112	✕
overflow-inline	135	135	69	26	135	79	26
overflow-inline.overlay	135	135	112	✕	135	112	✕
padding-block	87	87	66	14.1	87	66	14.5
padding-block-end	69	79	41	12.1	69	41	12.2
padding-block-start	69	79	41	12.1	69	41	12.2
padding-inline	87	87	66	14.1	87	66	14.5
padding-inline-end	69	79	41	12.1	69	41	12.2
padding-inline-start	69	79	41	12.1	69	41	12.2