BASELINE NowYouCanUse.com
Widely Available CSS

Logical properties

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.
Baseline Status: Achieved Widely Available on Mar 20, 2024 (Cross-browser Newly Available since Sep 20, 2021).
Desktop Browser Engine Support
Google Chrome
89
Supported
Mozilla Firefox
66
Supported
Apple Safari
15
Supported
Microsoft Edge
89
Supported
Mobile Browser Engine Support
Chrome Android
89
Firefox Android
66
Safari iOS
15
Specifications and References
MDN Browser Compat Data Keys:
css.properties.block-size ↗ css.properties.block-size.fit-content ↗ css.properties.block-size.max-content ↗ css.properties.block-size.min-content ↗ css.properties.border-block ↗ css.properties.border-block-color ↗ css.properties.border-block-color.currentColor ↗ css.properties.border-block-color.transparent ↗ css.properties.border-block-end ↗ css.properties.border-block-end-color ↗ css.properties.border-block-end-color.currentColor ↗ css.properties.border-block-end-color.transparent ↗ css.properties.border-block-end-style ↗ css.properties.border-block-end-style.dashed ↗ css.properties.border-block-end-style.dotted ↗ css.properties.border-block-end-style.double ↗ css.properties.border-block-end-style.groove ↗ css.properties.border-block-end-style.hidden ↗ css.properties.border-block-end-style.inset ↗ css.properties.border-block-end-style.none ↗ css.properties.border-block-end-style.outset ↗ css.properties.border-block-end-style.ridge ↗ css.properties.border-block-end-style.solid ↗ css.properties.border-block-end-width ↗ css.properties.border-block-end-width.medium ↗ css.properties.border-block-end-width.thick ↗ css.properties.border-block-end-width.thin ↗ css.properties.border-block-end.currentColor ↗ css.properties.border-block-end.dashed ↗ css.properties.border-block-end.dotted ↗ css.properties.border-block-end.double ↗ css.properties.border-block-end.groove ↗ css.properties.border-block-end.hidden ↗ css.properties.border-block-end.inset ↗ css.properties.border-block-end.medium ↗ css.properties.border-block-end.none ↗ css.properties.border-block-end.outset ↗ css.properties.border-block-end.ridge ↗ css.properties.border-block-end.solid ↗ css.properties.border-block-end.thick ↗ css.properties.border-block-end.thin ↗ css.properties.border-block-end.transparent ↗ css.properties.border-block-start ↗ css.properties.border-block-start-color ↗ css.properties.border-block-start-color.currentColor ↗ css.properties.border-block-start-color.transparent ↗ css.properties.border-block-start-style ↗ css.properties.border-block-start-style.dashed ↗ css.properties.border-block-start-style.dotted ↗ css.properties.border-block-start-style.double ↗ css.properties.border-block-start-style.groove ↗ css.properties.border-block-start-style.hidden ↗ css.properties.border-block-start-style.inset ↗ css.properties.border-block-start-style.none ↗ css.properties.border-block-start-style.outset ↗ css.properties.border-block-start-style.ridge ↗ css.properties.border-block-start-style.solid ↗ css.properties.border-block-start-width ↗ css.properties.border-block-start-width.medium ↗ css.properties.border-block-start-width.thick ↗ css.properties.border-block-start-width.thin ↗ css.properties.border-block-start.currentColor ↗ css.properties.border-block-start.dashed ↗ css.properties.border-block-start.dotted ↗ css.properties.border-block-start.double ↗ css.properties.border-block-start.groove ↗ css.properties.border-block-start.hidden ↗ css.properties.border-block-start.inset ↗ css.properties.border-block-start.medium ↗ css.properties.border-block-start.none ↗ css.properties.border-block-start.outset ↗ css.properties.border-block-start.ridge ↗ css.properties.border-block-start.solid ↗ css.properties.border-block-start.thick ↗ css.properties.border-block-start.thin ↗ css.properties.border-block-start.transparent ↗ css.properties.border-block-style ↗ css.properties.border-block-style.dashed ↗ css.properties.border-block-style.dotted ↗ css.properties.border-block-style.double ↗ css.properties.border-block-style.groove ↗ css.properties.border-block-style.hidden ↗ css.properties.border-block-style.inset ↗ css.properties.border-block-style.none ↗ css.properties.border-block-style.outset ↗ css.properties.border-block-style.ridge ↗ css.properties.border-block-style.solid ↗ css.properties.border-block-width ↗ css.properties.border-block-width.medium ↗ css.properties.border-block-width.thick ↗ css.properties.border-block-width.thin ↗ css.properties.border-block.currentColor ↗ css.properties.border-block.dashed ↗ css.properties.border-block.dotted ↗ css.properties.border-block.double ↗ css.properties.border-block.groove ↗ css.properties.border-block.hidden ↗ css.properties.border-block.inset ↗ css.properties.border-block.medium ↗ css.properties.border-block.none ↗ css.properties.border-block.outset ↗ css.properties.border-block.ridge ↗ css.properties.border-block.solid ↗ css.properties.border-block.thick ↗ css.properties.border-block.thin ↗ css.properties.border-block.transparent ↗ css.properties.border-end-end-radius ↗ css.properties.border-end-start-radius ↗ css.properties.border-inline ↗ css.properties.border-inline-color ↗ css.properties.border-inline-color.currentColor ↗ css.properties.border-inline-color.transparent ↗ css.properties.border-inline-end ↗ css.properties.border-inline-end-color ↗ css.properties.border-inline-end-color.currentColor ↗ css.properties.border-inline-end-color.transparent ↗ css.properties.border-inline-end-style ↗ css.properties.border-inline-end-style.dashed ↗ css.properties.border-inline-end-style.dotted ↗ css.properties.border-inline-end-style.double ↗ css.properties.border-inline-end-style.groove ↗ css.properties.border-inline-end-style.hidden ↗ css.properties.border-inline-end-style.inset ↗ css.properties.border-inline-end-style.none ↗ css.properties.border-inline-end-style.outset ↗ css.properties.border-inline-end-style.ridge ↗ css.properties.border-inline-end-style.solid ↗ css.properties.border-inline-end-width ↗ css.properties.border-inline-end-width.medium ↗ css.properties.border-inline-end-width.thick ↗ css.properties.border-inline-end-width.thin ↗ css.properties.border-inline-end.currentColor ↗ css.properties.border-inline-end.dashed ↗ css.properties.border-inline-end.dotted ↗ css.properties.border-inline-end.double ↗ css.properties.border-inline-end.groove ↗ css.properties.border-inline-end.hidden ↗ css.properties.border-inline-end.inset ↗ css.properties.border-inline-end.medium ↗ css.properties.border-inline-end.none ↗ css.properties.border-inline-end.outset ↗ css.properties.border-inline-end.ridge ↗ css.properties.border-inline-end.solid ↗ css.properties.border-inline-end.thick ↗ css.properties.border-inline-end.thin ↗ css.properties.border-inline-end.transparent ↗ css.properties.border-inline-start ↗ css.properties.border-inline-start-color ↗ css.properties.border-inline-start-color.currentColor ↗ css.properties.border-inline-start-color.transparent ↗ css.properties.border-inline-start-style ↗ css.properties.border-inline-start-style.dashed ↗ css.properties.border-inline-start-style.dotted ↗ css.properties.border-inline-start-style.double ↗ css.properties.border-inline-start-style.groove ↗ css.properties.border-inline-start-style.hidden ↗ css.properties.border-inline-start-style.inset ↗ css.properties.border-inline-start-style.none ↗ css.properties.border-inline-start-style.outset ↗ css.properties.border-inline-start-style.ridge ↗ css.properties.border-inline-start-style.solid ↗ css.properties.border-inline-start-width ↗ css.properties.border-inline-start-width.medium ↗ css.properties.border-inline-start-width.thick ↗ css.properties.border-inline-start-width.thin ↗ css.properties.border-inline-start.currentColor ↗ css.properties.border-inline-start.dashed ↗ css.properties.border-inline-start.dotted ↗ css.properties.border-inline-start.double ↗ css.properties.border-inline-start.groove ↗ css.properties.border-inline-start.hidden ↗ css.properties.border-inline-start.inset ↗ css.properties.border-inline-start.medium ↗ css.properties.border-inline-start.none ↗ css.properties.border-inline-start.outset ↗ css.properties.border-inline-start.ridge ↗ css.properties.border-inline-start.solid ↗ css.properties.border-inline-start.thick ↗ css.properties.border-inline-start.thin ↗ css.properties.border-inline-start.transparent ↗ css.properties.border-inline-style ↗ css.properties.border-inline-style.dashed ↗ css.properties.border-inline-style.dotted ↗ css.properties.border-inline-style.double ↗ css.properties.border-inline-style.groove ↗ css.properties.border-inline-style.hidden ↗ css.properties.border-inline-style.inset ↗ css.properties.border-inline-style.none ↗ css.properties.border-inline-style.outset ↗ css.properties.border-inline-style.ridge ↗ css.properties.border-inline-style.solid ↗ css.properties.border-inline-width ↗ css.properties.border-inline-width.medium ↗ css.properties.border-inline-width.thick ↗ css.properties.border-inline-width.thin ↗ css.properties.border-inline.currentColor ↗ css.properties.border-inline.dashed ↗ css.properties.border-inline.dotted ↗ css.properties.border-inline.double ↗ css.properties.border-inline.groove ↗ css.properties.border-inline.hidden ↗ css.properties.border-inline.inset ↗ css.properties.border-inline.medium ↗ css.properties.border-inline.none ↗ css.properties.border-inline.outset ↗ css.properties.border-inline.ridge ↗ css.properties.border-inline.solid ↗ css.properties.border-inline.thick ↗ css.properties.border-inline.thin ↗ css.properties.border-inline.transparent ↗ css.properties.border-start-end-radius ↗ css.properties.border-start-start-radius ↗ css.properties.clear.inline-end ↗ css.properties.clear.inline-start ↗ css.properties.float.inline-end ↗ css.properties.float.inline-start ↗ css.properties.inline-size ↗ css.properties.inline-size.fit-content ↗ css.properties.inline-size.max-content ↗ css.properties.inline-size.min-content ↗ css.properties.inset ↗ css.properties.inset-block ↗ css.properties.inset-block-end ↗ css.properties.inset-block-end.auto ↗ css.properties.inset-block-start ↗ css.properties.inset-block-start.auto ↗ css.properties.inset-block.auto ↗ css.properties.inset-inline ↗ css.properties.inset-inline-end ↗ css.properties.inset-inline-end.auto ↗ css.properties.inset-inline-start ↗ css.properties.inset-inline-start.auto ↗ css.properties.inset-inline.auto ↗ css.properties.inset.auto ↗ css.properties.margin-block ↗ css.properties.margin-block-end ↗ css.properties.margin-block-start ↗ css.properties.margin-inline ↗ css.properties.margin-inline-end ↗ css.properties.margin-inline-start ↗ css.properties.max-block-size ↗ css.properties.max-block-size.fit-content ↗ css.properties.max-block-size.max-content ↗ css.properties.max-block-size.min-content ↗ css.properties.max-inline-size ↗ css.properties.max-inline-size.fit-content ↗ css.properties.max-inline-size.max-content ↗ css.properties.max-inline-size.min-content ↗ css.properties.min-block-size ↗ css.properties.min-block-size.fit-content ↗ css.properties.min-block-size.max-content ↗ css.properties.min-block-size.min-content ↗ css.properties.min-inline-size ↗ css.properties.min-inline-size.fit-content ↗ css.properties.min-inline-size.max-content ↗ css.properties.min-inline-size.min-content ↗ css.properties.overflow-block ↗ css.properties.overflow-block.overlay ↗ css.properties.overflow-inline ↗ css.properties.overflow-inline.overlay ↗ css.properties.padding-block ↗ css.properties.padding-block-end ↗ css.properties.padding-block-start ↗ css.properties.padding-inline ↗ css.properties.padding-inline-end ↗ css.properties.padding-inline-start ↗
id: logical-properties