Widely Available
CSS
id: logical-properties
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 ↗